在Angular中自定义选择不显示ngModel的值

Question

我对angular（1）颇为陌生，并且遇到了问题。我需要在我的应用中使用自定义年份选择器，这个选择器出现在几个地方。原始代码是

HTML

<select id="yearpicker" ng-model="vm.film.release" required="true" class="form-control"> 
    <option disabled="" selected="" value="">Choose one... </option> 
    <option disabled="">___________________</option> 
    <option value="Unknown">Release Year Unknown</option> 
    <option disabled="">___________________  </option> 
</select> 

JS

<script> 
    for (i = new Date().getFullYear(); i > 1900; i--) 
    { 
     $('#yearpicker').append($('<option />').val(i).html(i)); 
    }; 
</script> 

这给了我一个很好的下拉与1900年所有年份的提出和领域多年，其中一年是未知的。但是，代码在页面上，这不是很好，这意味着我必须加载jquery才能发现很多错误，也意味着代码在几个地方重复。我把代码拉出来，放在一个指令中，所以我不必重复它，所以我可以先加载角度并摆脱错误。我不喜欢这样

指令JS

angular 
.module('myapp') 
.directive('customYearpicker', customYearpicker); 

function customYearpicker() { 
    return { 
     restrict: 'AE', 
     scope: { 
      bindModel: '=ngModel' 
     }, 
     controller: function() { 
      for (i = new Date().getFullYear(); i >= 1900; i--) { 
       $('#yearpicker').append($('<option />').val(i).html(i));      
      }; 
     }, 
     templateUrl: '/common/directives/customYearpicker/customYearpicker.template.html' 
    }; 
}; 

HTML模板

<select id="yearpicker" ng-model="bindModel" class="form-control"> 
    <option value="">Choose one... </option> 
    <option disabled="">___________________</option> 
    <option value="Unknown">Release Year Unknown</option> 
    <option disabled="">___________________  </option>  
</select> 

，我叫它像这样

<custom-yearpicker name="release" ng-model="vm.record.release" required="true"></custom-yearpicker> 

这工作得很好无处不在，除非我想要编辑记录，现在选择不再由'vm.record.release'中的值填充，而只是空白。 'vm.record.release'具有正确的值，它不会显示在我的下拉菜单中，但是与其他所有实例一样，它们都不是“选择一个...”。除此之外，年份选手工作正常，但这需要修复。

如果任何人都可以指出我做出的（很可能）显而易见的失误，或者指出我正确的方向，如果我这样做是错误的，那将是非常感谢。

谢谢。

UPDATE

所以被建议使用NG选项后，我现在已经更新了我的指令是：

angular 
.module('myapp') 
.directive('customYearpicker', customYearpicker); 

function customYearpicker() { 

    return { 
     restrict: 'AE', 
     scope: { 
      bindModel: '=ngModel' 
     }, 
     controller: function ($scope) { 
      $scope.selectOptions = [ 
       { name: '', text: 'Choose one... ' }, 
       { name: '', text: '___________________' }, 
       { name: 'Unknown', text: 'Release Year Unknown' }, 
       { name: '', text: '___________________' }, 
      ]; 

      for (i = new Date().getFullYear(); i >= 1900; i--) { 
       // $('#yearpicker').append($('<option />').val(i).html(i)); 
       var newOpt = { name: i, text: i}; 
       $scope.selectOptions.push(newOpt);     
       }; 

       console.log($scope.selectOptions); 
       return $scope.selectOptions; 
     },   
     templateUrl: "/common/directives/customYearpicker/customYearpicker.template.html" 
    }; 
    }; 

和HTML模板这样：

<select id="yearpicker" ng-model="bindModel" ng-options="option.name as option.text for option in selectOptions" class="form-control"> </select> 

和我这样称呼它：

<custom-yearpicker name="release" ng-model="vm.record.release" required="true"></custom-yearpicker> 

问题是即使它和以前一样工作，我禁用的选项不再被禁用，yearpicker仍然没有显示vm.record.release的值。如果我从选择器中选择一个值，它会被编辑控制器拾取而没有任何问题，但由于某种原因，它并未在选择器中被选中。仍在寻找建议。

Answer 1

当引导您的应用程序时，您需要声明依赖关系。如果没有，只需使用一个空数组。

var app = angular.module('myapp', []); 
app.directive('customYearpicker', customYearpicker); 

function customYearpicker() { 
    return { 
    restrict: 'AE', 
     scope: { 
     bindModel: '=ngModel' 
     }, 
     controller: function() { 
     for (i = new Date().getFullYear(); i >= 1900; i--) { 
      $('#yearpicker').append($('<option />').val(i).html(i));      
     }; 
     }, 
     template: `<select id="yearpicker" ng-model="bindModel" class="form-control"><option value="">Choose one... </option><option disabled="">___________________</option><option value="Unknown">Release Year Unknown</option><option disabled="">___________________  </option></select>` 
    }; 
}; 

通知我用template代替templateUrl对我的最终的权宜之计，而是你templateUrl应该工作。

另外，我应该提到，这不是创建选择的角度方式。请look into ngOptions。

Answer 2

你不应该使用jQuery来做这些事情。

指令代码：

function customYearSelect(){ 
    return { 
    restrict: 'E', 
    scope: { 
     model: '=ngModel', 
     name: '@', 
     yearFrom: '@', 
     yearTo: '@' 
    }, 
    templateUrl: 'custom-year-select.template.html', 
    link: function (scope,element,attr) { 
     var yearFrom = attr['yearFrom'] ? attr['yearFrom'] : 1990; 
     var yearTo = attr['yearTo'] ? attr['yearTo'] : new Date().getFullYear();  
     scope.yearArray = []; 
     for(var i = yearTo; i >= yearFrom; i--){ 
     scope.yearArray.push(i); 
     } 
    }  
    } 
} 

模板：

<select name="custom-year-selet" ng-model="model" ng-options="name + ' ' + year for year in yearArray"> 
     <option name="selectYear" value="" style="display:none">-- select year --</option> 
    </select> 

HTML：

<custom-year-select name="Release year:" ng-model="selectedYear2" 
    year-from="2000" year-to="2005"></custom-year-select> 

这里有一个工作的jsfiddle：http://jsfiddle.net/kvda7Lc7/

Answer 3

好吧，我想通了。最后，它只是我是一个有点迟钝，修复是：

for (i = new Date().getFullYear(); i >= 1900; i--) { 
      // $('#yearpicker').append($('<option />').val(i).html(i)); 
      var newOpt = { name: String(i), text: String(i) }; 
      $scope.selectOptions.push(newOpt);     
      }; 

我只是需要解析的日期，卫生署！

非常感谢您的帮助，无论如何，我现在有一个指令做它的角度的方式，而不是一些bodgy jquery hack，它的一切工作。

谢谢你让我在正确的轨道Jorge。