Question

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

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

＆＃13;

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

＆＃13;

li{
  list-style-type: none;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

通过链接方法解释自定义指令。怎么样？

1 个答案: