61

我正在尝试编写一个自动完成指令，该指令使用 $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">

那么，我如何以 Angular 的方式正确地将这一切拼凑在一起呢？

4

5 回答 5

45

我做了一个自动完成指令并将其上传到 GitHub。它还应该能够处理来自 HTTP 请求的数据。

这是演示： http: //justgoscha.github.io/allmighty-autocomplete/ 这里是文档和存储库：https ://github.com/JustGoscha/allmighty-autocomplete

promise因此，基本上，当您想从 HTTP 请求中获取数据时，您必须返回 a ，当数据加载时，该请求会得到解决。因此，您必须$q在发出 HTTP 请求的地方注入服务/指令/控制器。

例子：

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;
}

我希望这有帮助。

于 2013-12-19T17:00:09.973 回答
37

使用 angular-ui-bootstrap 的typehead。

它对 $http 和 promises 有很大的支持。此外，它根本不包含任何 JQuery，纯 AngularJS。

（我总是更喜欢使用现有的库，如果他们缺少一些东西来打开一个问题或拉取请求，那么再次创建你自己的要好得多）

于 2013-10-07T14:24:59.353 回答
17

您需要编写一个ng-change范围内具有功能的控制器。在ng-change回调中，您调用服务器并更新完成。这是一个存根（没有$http，因为这是一个笨拙的）：

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);
    }
  }
}
于 2013-08-27T17:34:39.177 回答
6

the easiest way to do that in angular or angularjs without external modules or directives is using list and datalist HTML5. You just get a json and use ng-repeat for feeding the options in datalist. The json you can fetch it from ajax.

in this example:

  • ctrl.query is the query that you enter when you type.
  • ctrl.msg is the message that is showing in the placeholder
  • ctrl.dataList is the json fetched

then you can add filters and orderby in the ng-reapet

!! list and datalist id must have the same name !!

 <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>

UPDATE : is native HTML5 but be carreful with the type browser and version. check it out : https://caniuse.com/#search=datalist.

于 2017-07-10T13:20:38.987 回答
0

我发现这个链接很有帮助

$scope.loadSkillTags = function (query) {
var data = {qData: query};
   return SkillService.querySkills(data).then(function(response) {
   return response.data;
  });
 };
于 2016-07-12T03:33:50.277 回答