如何使用angularjs預填充選擇選項自定義指令

Question

我是新創建的指令，該指令將在整個應用程序中為我提供幫助。 我基本上想創建一個預填充選項的獨立選擇元素指令。 對於最終結果，我要做的就是將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();
      }
     };
  });
})();

柱塞： 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

還要注意的是它的require並不required 。 而且由於您鍵入了錯誤的代碼-您可以將其一起刪除，因此在您的情況下不需要使用它（您正在使用范圍ngModel: '='綁定）。