javascript - 通过链接方法自定义指令解释。如何？

Question

我是 AngularJS 的新手。我想用自动完成功能获取文本。在该自动完成中，我的 JSON 是从 JS 检索的。我没有想法来简化。给我一个简单的想法。

要求是使用自定义指令链接和编译自动完成文本框 orderBy 名称。

angular.module('docsSimpleDirective', []).controller('Controller', ['$scope', function($scope) {
  $scope.customer = [{name: 'Samudrala',address: '500033 Warangal'},
                     {name: 'Raamu',address: '500088 Karimnagar'},
                     {name: 'Namini',address: '500044 Kukatpalli'}
                    ];

}]).directive('myCustomer', function() {
  return {
    Restrict: 'E',
    template: '<input type="text"/><ul ng-repeat ="cust in customer||filter"><li>{{"Name : "+cust.name+" - And - "+" Address : "+cust.address}}</li></ul>'
  };
});

li{
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <div ng-app="docsSimpleDirective" ng-controller="Controller">
  <div my-customer></div>
</div>

Answer 1

我希望我正确理解你的问题，但你可以使用 datalist 来做到这一点。要按名称排序，您可以使用 orderBy 过滤器中的构建。

<option ng-repeat="cust in customer|orderBy:\'name\'">

angular.module('docsSimpleDirective', []).controller('Controller', ['$scope', function($scope) {
  $scope.customer = [{name: 'Samudrala',address: '500033 Warangal'},
                     {name: 'Raamu',address: '500088 Karimnagar'},
                     {name: 'Namini',address: '500044 Kukatpalli'}
                    ];

}]).directive('myCustomer', function() {
  return {
    Restrict: 'E',
    template: '<input type="text" list="customers"/>' +
              '<datalist id="customers">' +
                '<option ng-repeat="cust in customer|orderBy:\'name\'">' +
                  '{{"Name : "+cust.name+" - And - "+" Address : "+cust.address}}' +
                '<option>' + 
              '</datalist>'
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="docsSimpleDirective" ng-controller="Controller">
  <div my-customer></div>
</div>