當檢查複選框時禁用選擇框指令

Question

我在我的html中有2選擇指令，並希望當複選框被選中時將它們重新命名......我怎麼辦？我已將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-模型將無法在非輸入上工作），以便您可以在您的select指令中使用它。

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