通过链接方法的自定义指令说明。 怎么样？

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名称排序，您可以使用build in 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>