如何根據從下拉列表中選擇的項目更改角度js中的指令

Question

我有一個下拉列表和一個日曆。我爲日曆驗證創建了指令。現在我想根據所選的下拉項目更改指令。

下面是HTML

<select class="form-control half" ng-model="address.prooftype"> 
              <option value="" disabled>Select Address Proof</option> 
              <option value="dl" data-ng-disabled="paddress.prooftype == 'dl'"> 
               Driving License 
              </option> 
              <option value="passport" 
                data-ng-disabled="paddress.prooftype == 'passport'"> 
               Passport 
              </option> 
              <option value="aadharcard" 
                data-ng-disabled="paddress.prooftype == 'aadharcard'"> 
               Aadhar Card 
              </option> 
              <option value="bankstatement" 
                data-ng-disabled="paddress.prooftype == 'bankstatement'"> 
               Bank Statement 
              </option> 
              <option value="utilitybills" 
                data-ng-disabled="paddress.prooftype == 'utilitybills'"> 
               Utility Bills 
              </option> 
              <option value="voteridcard" 
                data-ng-disabled="paddress.prooftype == 'voteridcard'"> 
               Voter ID Card 
              </option> 
             </select> 
             <input readonly placeholder="Expiry Date" type='text' 
               class="btn btn-default form-control half" exp-date 
               data-ng-model="address.expdate"/> 

角JS指令

App.directive('utilityDate', function() { 
var link = function (scope, element, attrs) { 
    var date = new Date(); 
    date.setDate(date.getDate() - 90); 
    var modelName = attrs['ngModel']; 
    //console.log(modelName); 
    $(element).datepicker(
     { 
      endDate: new Date(), 
      startDate: date, 
      dateFormat: 'dd/mm/yyyy', 
      autoclose: true, 
      showMonthAfterYear: true, 
      showButtonPanel: true, 
      startView: 2, 
      onSelect: function (dateText) { 
       scope[modelName] = dateText; 
       scope.$apply(); 
      } 
     }); 
    $(element).datepicker('setDate', null); 
}; 
return { 
    require: 'ngModel', 
    restrict: 'A', 
    link: link 
}}); 
App.directive('expDate', function() { 
    var link = function(scope, element, attrs) { 
     var date = new Date(); 
     date.setDate(date.getDate() + 90); 
     var modelName = attrs['datePicker']; 
     $(element).datepicker(
      { 
       startDate: date, 
       dateFormat: 'dd/mm/yyyy', 
       autoclose: true, 
       showMonthAfterYear: true, 
       showButtonPanel: true, 
       startView: 2, 
       onSelect: function (dateText) { 
        scope[modelName] = dateText; 
        scope.$apply(); 
       } 
      }); 
    }; 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: link 
    } 
}); 

有2個指令，即utilitydate和EXPDATE。當我點擊「公用賬單」選項時，我想將日曆更改爲實用日期。

Answer 1

也許你想要的只是一個ngSwitch：根據選擇的選項，您生成一個或另一個指令，你讓他們「指向」同一ngModel。

<directive ng-switch="paddress.prooftype"> 
    <directive ng-switch-when="'utilitybills'"> 
    <input readonly placeholder="Expiry Date" type='text' utility-date data-ng-model="address.expdate"/> 
    </directive> 
    <directive ng-switch-when="'otherOptionIfNeeded'">...</directive> 
    <directive ng-switch-default> 
    <input readonly placeholder="Expiry Date" type='text' exp-date data-ng-model="address.expdate"/> 
    </directive> 
</directive> 

在上面的例子中，當paddress.prooftype具有值的指令 「utilityDate」 將被用於 'utilitybills'。否則，將顯示「expDate」指令。

https://docs.angularjs.org/api/ng/directive/ngSwitch