Custom directives explanation through link method. How?

Question

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>

What does this code do already? What are you stuck on in particular? — halfer, Nov 18 '16 at 10:05

RWAM · Answer 1 · 2016-11-18T09:55:42.327

1

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>

edited Nov 18 '16 at 09:55

answered Nov 18 '16 at 09:17

RWAM

6,760
3
32
45

Is it possible to put link and compile methods can you please explain – Samudrala Ramu Nov 18 '16 at 09:26
@SamudralaRamu I've updated my answer with the `orderBy` filter. What would you like to compile? – RWAM Nov 18 '16 at 09:57
what is the perticular use of link function and compilation of attribute . – Samudrala Ramu Nov 18 '16 at 10:14
Have a look at http://stackoverflow.com/a/12570008/1295622 and http://stackoverflow.com/questions/24615103/angular-directives-when-and-how-to-use-compile-controller-pre-link-and-post – RWAM Nov 18 '16 at 10:20

Custom directives explanation through link method. How?

1 Answers1