ドロップダウンリストから選択したアイテムに基づいて角度jのディレクティブを変更する方法

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 
    } 
}); 

すなわちutilitydateとEXPDATE 2つのディレクティブがあります。 "Utility Bills"オプションをクリックすると、カレンダーをutilitydateに変更したいと思います。

Answer 1

は、たぶん、あなたが望むものだけngSwitchです：選択したオプションに応じて、1つのまたは他のディレクティブを生成し、あなたが同じ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値 'utilitybills' を有する場合、指令 "utilityDate" が使用されます。それ以外の場合は、 "expDate"指示が表示されます。

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