如何根據AngularJS中的不同組合框值設置輸入字段的最大長度？

Question

我有一個接受信用卡信息的付款表格。 CVV字段被設置爲只接受最多4個數字字符。 AngularJS有沒有辦法根據在不同組合框中選擇的卡片類型將maxlength更改爲3或4？

謝謝！

<div class="form-group"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <label for="cvv">CVV <span style="color:red;">*</span></label> 
     </div> 
     <div class="col-md-4"> 
      <input type="text" class="form-control" name="cvv" id="cvv" numbers-only="numbers-only" maxlength="4" ng-model="paymentForm.CVV" required /> 
     </div> 
    </div> 
</div> 

<div class="form-group"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <label for="cardType">Card Type</label> 
     </div> 
     <div class="col-md-4"> 
      <select id="cardType" class="form-control" ng-options="opt for opt in cardTypes" ng-model="paymentForm.CardType"></select> 
     </div> 
     <div class="col-md-4"> 
      <img ng-src="~/images/credit-card-logos.png" class="logosImage" /> 
     </div> 
    </div> 
</div> 

Answer 1

使用ng-maxlength。例如。 ng-maxlength="paymentForm.CardType == 1 ? 3 : 4"

Answer 2

看這樣的：

var app = angular.module("App", []); 
 

 
app.controller("DemoController", function($scope, $compile){ 
 
    $scope.cardTypes = [3, 6, 9]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="App" ng-controller="DemoController" ng-init="montaAccordion()"> 
 
    Max Lenght: {{mxLength}} <select id="cardType" class="form-control" ng-options="opt for opt in cardTypes" ng-model="mxLength"></select> 
 
    
 
    Text: <input type="text" maxlength="{{mxLength}}"/> 
 
</div>