Как предварительно заполнить опцию выбора опций с помощью angularjs

Question

Я довольно новые директивы создания, и эта директива поможет мне в течение всего моего приложения. Я в основном хочу создать автономную директиву элементов select, которая предварительно заполняет параметры. Для конечного результата все, что я хочу сделать, это привязать к нему ngModel для установки и извлечения. Мой HTML разметка выглядит следующим образом:

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

и вот угловой код:

(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

Заранее спасибо за ваше время и помощь.

Answer 1

У вас неверные котировки: " в атрибуте ngOption. Надлежащая один будет:

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(''), 

Демо:http://plnkr.co/edit/RLGc9dAElD1wpLN8uPm0?p=preview

Также обратите внимание, что это не requirerequired. И поскольку вы ошиблись, вы можете удалить все это вместе, это не нужно в вашем случае (вы используете область связи ngModel: '=').