如何根据AngularJS中不同的组合框值在输入字段上设置maxlength?

时间:2015-11-03 16:23:28

标签: javascript angularjs

我有一张接受信用卡信息的付款表格。 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>

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

看看这个:

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>