Angular Js custom directive for master data drop down

Question

New to Angular JS,

I trying to define custom directive for dropdown with data from web service.

Now trying to do with some static data but not working.

app.directive("deviceBranch", function(){
    return {
        templateUrl : 'resources/view/template/device-branch-list.html',
        controller : function($scope) {
            $scope.listBranch = [{
                deviceBranchId:"id1",
                deviceBranchName:"value1"
            },{
                deviceBranchId:"id2",
                deviceBranchName:"value2"
            },{
                deviceBranchId:"id3",
                deviceBranchName:"valkue3"
            }]
        }
    }
});

Added "Select" in the template with-

ng-options="service.deviceBranchId as service.deviceBranchName for service in listBranch"

This is how I am using directive

<device-branch></device-branch>

Select is populated, but no options are available.

Please assist.

can you post your template ? or even better a plker reproducing your problem — Panos K
– Panos K, Commented Apr 20, 2018 at 12:40

leo · Accepted Answer · 2018-04-23 14:14:56Z

1

Looks like you were just missing an ng-model in your template. Below is a link to a working sample.

<select ng-options="service.deviceBranchId as service.deviceBranchName for service in listBranch" ng-model="selected"></select>

You can also inject $http into your directive to get data from web services.

app.directive("deviceBranch", function($http){
  return {
    templateUrl : 'device-branch-list.html',
    scope: {
      ngModel: '='
    },
    controller : function($scope) {
        $scope.listBranch = [{
            deviceBranchId:"id1",
            deviceBranchName:"value1"
        },{
            deviceBranchId:"id2",
            deviceBranchName:"value2"
        },{
            deviceBranchId:"id3",
            deviceBranchName:"valkue3"
        }]
    },
    link: function($scope, element, attrs){
      //var url = ""
      //$http.get(url).then(function(response){
      // $scope.listBranch = response;
      //})
    }
  }
});

Here's the template (device-branch-list.html):

<select ng-options="service.deviceBranchId as service.deviceBranchName for service in listBranch" ng-model="ngModel">

https://plnkr.co/edit/essg24GsrhSKwqXO578p?p=preview

edited Apr 23, 2018 at 14:14

answered Apr 20, 2018 at 15:27

leo

2762 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amol Patil Over a year ago

Thanks for the answer, but I would like to give custom model name, because this directive can be use more than once on same page. Please try to give update

leo Over a year ago

I've updated the plnkr so that you could add ng-model onto the directive. The variable you pass will now two way bind with the input as seen in the demo. The changes includes adding 'ng-model' to script.js and index.html. Also a change on the template html file to change from 'selected' to 'ngModel'

Collectives™ on Stack Overflow

Angular Js custom directive for master data drop down

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related