Samudrala Ramu Samudrala Ramu - 15 days ago 5
AngularJS Question

Custom directives explanation through link method. How?

I am new in AngularJS. I want to take a text with autocomplete. In that autocomplete, my JSON is retrieved from JS. I don't have an idea to simplify. Give me a simple idea.

Requirement is autocomplete textbox orderBy name using custom directives link and compilation.



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

I hope I understand your question right, but you can do this with the use of datalist. And to order by name you can use the build in orderBy filter.

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

Comments