Question

我对棱角分明（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>

这在任何地方都可以正常工作，除非我想编辑记录，现在select不再由'vm.record.release'中的值填充，而且只是空白。 'vm.record.release'具有正确的值，它不会显示在我的下拉列表中，但与其他所有实例一样，也不是“选择一个...”。除此之外，年度选择工作正常，但这需要修复。

如果有人能够指出我所做的（最可能的）明显的错误，或者如果我做错了就指出了我正确的方向，那将非常感激。

感谢。

更新

因此，在被建议使用ng-options之后，我现在更新了我的指令：

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应该有效。

另外，我应该提到这不是Angular创建选择的方式。请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。

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

3 个答案: