Angularjs从$ http自动完成
我试图写一个自动完成指令，使用$ http请求从服务器获取数据（不使用任何外部插件或脚本） 。 目前它只适用于静态数据。 现在，我知道我需要将我的$ http请求插入到指令的source:中，但是我找不到任何关于这个主题的好文档。
http请求
$http.post($scope.url, { "command": "list category() names"}). success(function(data, status) { $scope.status = status; $scope.names = data; }) . error(function(data, status) { $scope.data = data || "Request failed"; $scope.status = status; });
指示
app.directive('autoComplete', function($timeout) { return function(scope, iElement, iAttrs) { iElement.autocomplete({ source: scope[iAttrs.uiItems], select: function() { $timeout(function() { iElement.trigger('input'); }, 0); } }); }; });
视图
<input auto-complete ui-items="names" ng-init="manualcat='no category entered'" ng-model="manualcat">
那么，我怎样才能把这一切正确地拼凑在一起呢？
我做了一个自动完成的指令，并将其上传到GitHub。 它也应该能够处理来自HTTP-Request的数据。
这里的演示： http : //justgoscha.github.io/allmighty-autocomplete/在这里的文档和存储库： https : //github.com/JustGoscha/allmighty-autocomplete
所以基本上，当你想从HTTP请求获取数据时，你必须返回一个promise ，在数据加载的时候这个数据会被parsing。 因此，您必须在发出HTTP请求的地方注入$q service / directive / controller。
例：
function getMyHttpData(){ var deferred = $q.defer(); $http.jsonp(request).success(function(data){ // the promise gets resolved with the data from HTTP deferred.resolve(data); }); // return the promise return deferred.promise; }
我希望这有帮助。
使用angular-ui-bootstrap的打字头 。
它非常支持$ http和promise。 而且，它完全不包含任何JQuery，纯粹的AngularJS。
（我总是更喜欢使用现有的库，如果他们错过了某些东西来打开问题或拉取请求，那么再创build自己的问题会好得多）
您需要编写一个控制器，并在范围内使用ng-change函数。 在ng-changecallback函数中，你可以调用服务器并更新完成。 这是一个存根 （没有$http因为这是一个plunk）：
HTML
<!doctype html> <html ng-app="plunker"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body> <div class='container-fluid' ng-controller="TypeaheadCtrl"> <pre>Model: {{selected| json}}</pre> <pre>{{states}}</pre> <input type="text" ng-change="onedit()" ng-model="selected" typeahead="state for state in states | filter:$viewValue"> </div> </body> </html>
JS
angular.module('plunker', ['ui.bootstrap']); function TypeaheadCtrl($scope) { $scope.selected = undefined; $scope.states = []; $scope.onedit = function(){ $scope.states = []; for(var i = 0; i < Math.floor((Math.random()*10)+1); i++){ var value = ""; for(var j = 0; j < i; j++){ value += j; } $scope.states.push(value); } } }
在不使用外部模块或指令的情况下，在angular或angularjs中执行此操作的最简单方法是使用列表和数据列表HTML5。 你只是得到一个JSON，并使用ng-repeat来提供datalist中的选项。 json可以从ajax中获取。
在这个例子中：
- ctrl.query是您键入时input的查询。
- ctrl.msg是在占位符中显示的消息
- ctrl.dataList是获取的json
那么你可以在ng-reapet中添加filter和orderby
！ 列表和datalist ID必须具有相同的名称！
<input type="text" list="autocompleList" ng-model="ctrl.query" placeholder={{ctrl.msg}}> <datalist id="autocompleList"> <option ng-repeat="Ids in ctrl.dataList value={{Ids}} > </datalist>
更新：是原生HTML5，但与types浏览器和版本carreful。 检查出来： https : //caniuse.com/#search=datalist 。
我发现这个链接有帮助
$scope.loadSkillTags = function (query) { var data = {qData: query}; return SkillService.querySkills(data).then(function(response) { return response.data; }); };
