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

Posted 2023-02-24

【中文标题】如何根据AngularJS中的不同组合框值在输入字段上设置maxlength？

【英文标题】：How to set maxlength on input field based on a different combo box value in AngularJS?

【发布时间】：2015-11-03 16:23:28

【问题描述】：

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

【问题讨论】：

【参考方案1】：

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

【参考方案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>