How to pre-populate select options custom directive using angularjs

Question

I'm fairly new creating directives and this directive would help me throughout my application. I basically want to create a self-contained select element directive that pre-populates the options. For the end result, all I want to do is tie an ngModel to it for setting and retrieving. My html markup looks like this:

<div family-drop-down 
 humans-only="true" 
 ng-model="vm.selectedFamilyMember"></div>

and here's the angular code:

(function(){
'use strict';

 angular.module('app', [])
  .controller('familyController', function(){
     var self = this;

     self.title = '';
     self.selectedFamilyMember = {};

     function init(){
        self.title = 'drop down example';
     }

     init();
  })
  .directive('familyDropDown', function(){
     function helperController(){
        var self = this;

        self.family = [];

        self.init = function() {
            self.family = [
                {id: 1, firstName: 'John', lastName: 'Doe', human: true},
                {id: 2, firstName: 'Jane', lastName: 'Doe', human: true},
                {id: 3, firstName: 'Baby', lastName: 'Doe', human: true},
                {id: 4, firstName: 'Dog', lastName: 'Doe', human: false}
            ];
        };
    }

    return {
      restrict: 'AE',
      replace: true,
      required: '^ngModel',
      scope: {
        humansOnly: '@',
        ngModel: '='
      },
      controller : helperController,
      controllerAs: 'vm',
      template: [
        '<select ', 
        'id = "ddlFamily" ',
        'name = "family" ',
        'class = "form-control" ',
        'ng-options = "(fam.firstName + " " + fam.lastName + " (" + fam.id + ")") for fam in vm.family" ',
        'required ',
        'title= "select family member in drop-down-list"> ',
        '<option value="">select member</value> ',
        '</select>'
        ].join(''),
      link: function(scope, element, attrs, ctrl){
        attrs('ng-model', scope.ngModel);
        ctrl.init();
      }
     };
  });
})();

Plunker: http://plnkr.co/edit/XfLRD8pzBISvQgV1mRqd?p=preview

Thanks in advance for your time and help.

dfsq · Accepted Answer · 2015-06-29 22:08:40Z

2

You have incorrect quotes escaping of " in ngOption attribute. Proper one would be:

template: [
    '<select ',
        'name="family" ',
        'class="form-control" ',
        'ng-options="(fam.firstName + \' \' + fam.lastName + \' (\' + fam.id + \')\') for fam in vm.family" ',
        'required ',
        'title= "select family member in drop-down-list"> ',
        '<option value="">select member</value> ',
    '</select>'
].join(''),

Demo: http://plnkr.co/edit/RLGc9dAElD1wpLN8uPm0?p=preview

Also note that it's require not required. And since you misstyped it - you can remove it all together, it's not needed in your case (you are using scope ngModel: '=' binding).

answered Jun 29, 2015 at 22:08

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

Byrdsong Over a year ago

Thank you so much for clearing that up. It's always great to have an extra pair of eyes look at code.

Collectives™ on Stack Overflow

How to pre-populate select options custom directive using angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related