Question

我的html中有2个select指令，并且想要在选中复选框时将它们分开...我该怎么办？我已将ng-model="ckecked"添加到input type="ckeckbox"和ng-disabled指令，但它们无效。

**year Drop Directive.js**

(function() {
  "use strict";

  angular.module('components.others').directive('yearDrop',function(){
      function getYears(offset, range){
        var currentYear = new Date().getFullYear();
        var years = [];
        for (var i = 0; i < range + 1; i++){
          var yearStr = ''+ (currentYear + offset - i);
          var newYear = {
            'label': yearStr,
            'value': yearStr
          };
          years.push(newYear);
        }
        return years;
      }
      return {
          restrict: 'E',
          scope:{
            year:'=year'
          },
          link: function(scope,element,attrs){
              scope.years = getYears(+attrs.offset, +attrs.range);
          },
          template: '<select class="form-control" ng-model="year" ng-    options="option.label for option in years track by option.value"><option     value=""> Select Year</option></select>'
      }
    });
})();

HTML

<div class="row" ng-init="checked=true">
    <div class="col-xs-12 col-md-4">
        <div class="form-group">
            <label class="_500">End date</label>
                <year-drop year="employment.endDateYear" offset="0" range="60"></year-drop>
        </div>
    </div>
    <div class="col-xs-12 col-md-4">
        <div class="form-group">
            <label class="_500">&nbsp;</label>
                <month-drop month="employment.endDateMonth"></month-drop>
        </div>
    </div>
    <div class="col-xs-12 col-md-4">
        <div class="form-group">
            <label class="block _500">&nbsp;</label>
                <label class="block m-t-sm md-check">
                    <input type="checkbox"><i class="blue" ng-model="checked"></i>Current
                </label>
        </div>
    </div>
                    </div>

Answer 1

看起来你ng-model处于错误的位置。它应位于input标记上，而不是i标记上。然后使用ng-disabled='checked'。

Answer 2

由于您正在制作模板嵌套在其中的自定义指令，因此您需要将ng-disabled属性表达式传递给模板：

(function() {
  "use strict";

  angular.module('components.others').directive('yearDrop',function(){
      function getYears(offset, range){
        var currentYear = new Date().getFullYear();
        var years = [];
        for (var i = 0; i < range + 1; i++){
          var yearStr = ''+ (currentYear + offset - i);
          var newYear = {
            'label': yearStr,
            'value': yearStr
          };
          years.push(newYear);
        }
        return years;
      }
      return {
          restrict: 'E',
          scope:{
            year:'=year',
            ngDisabled:'='
          },
          link: function(scope,element,attrs){
              scope.years = getYears(+attrs.offset, +attrs.range);
          },
          template: '<select class="form-control" ng-model="year" ng-options="option.label for option in years track by option.value"><option value="" ng-disabled='ngDisabled'> Select Year</option></select>'
      }
    });
})();

然后将ng-model属性移动到输入（ng-model不会对非输入工作），以便您可以在select指令上使用它。

<year-drop year="employment.endDateYear" offset="0" range="60" ng-disabled='checked'></year-drop>

选中复选框时禁用选择框指令

2 个答案: