javascript - 根据 Angular 中的另一个文本字段更改输入值

Question

这里是 Angular 的新手。我需要根据“cc_number”输入字段的第一位数字更改隐藏输入“cc_card”的值。前任。如果用户在 cc_number 中键入 5，则隐藏输入值将为“MasterCard”，如果用户键入 4，则隐藏输入值将为“Visa”等...

这是我的设置:

<div ng-app="" ng-init="prefixes={visa: '4', mastercard:'5', amex:'3', discover:'6'}" style="margin-bottom:25px;">    
    <div>
        <h1>Payment details</h1>
    </div>

    <div>   
        <input name="cc_number" class="text-box" type="text" id="cc_number" value="" size="30" maxlength="30" required="required" placeholder="Credit card number" ng-model="prefixes.cards">
        <input type="hidden"  name="cc_card" id="cc_card" value="" />
    </div>

    <div>
    <div>
        <img id="visa" src="images/visa-card-logo.png" ng-class="{'greyed' : prefixes.cards.charAt(0) !== '4'}" />
    </div>
    <div>
        <img id="mastercard" src="images/master-card-logo.png" ng-class="{'greyed' : prefixes.cards.charAt(0) !== '5'}"  />
    </div>
    <div>
        <img id="amex" src="images/amex-card-logo.png" ng-class="{'greyed' : prefixes.cards.charAt(0) !== '3'}"  />
    </div>
    <div>
        <img id="discover" src="images/discover-card-logo.png" ng-class="{'greyed' : prefixes.cards.charAt(0) !== '6'}"  />
    </div>
</div>

Answer 1

您可以做的是将ngModel 添加到隐藏输入，并在#cc_number 输入的值更改时更改该输入的模型。

要检测更改，您将 ngChange 添加到 #cc_number 并传递将验证输入的函数。

在此示例中，我使用绑定(bind)到隐藏输入的实际值来切换信用卡中的 .greyed 类。尝试将输入的值更改为 4，然后是 5 和 6，您会看到相关的信用卡名称可见，根据到输入值。

angular.module('app',[]).controller('ctrl', function($scope) {

  $scope.prefixes = {};
  $scope.ccNumberChnage = function() {
    var ccType = $scope.prefixes.cards ? $scope.prefixes.cards.charAt(0) : '';
    switch(ccType) {
      case '4': $scope.prefixes.type = 'mastercard'; break;
      case '5': $scope.prefixes.type = 'amex'; break;
      case '6': $scope.prefixes.type = 'discover'; break;
      default: $scope.prefixes.type = null; break;
    }
  };

});

.greyed {background:rgba(0,0,0,.5);}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" ng-init="prefixes={visa: '4', mastercard:'5', amex:'3', discover:'6'}" style="margin-bottom:25px;">    
    <div>
        <h1>Payment details</h1>
    </div>

    <div>   
        <input name="cc_number" class="text-box" type="text" id="cc_number" value="" size="30" maxlength="30" required="required" placeholder="Credit card number" ng-model="prefixes.cards" ng-change="ccNumberChnage()">
        <input type="hidden" ng-model="prefixes.type" name="cc_card" id="cc_card" value="" />
    </div>

 
   
    <div id="mastercard" ng-class="{'greyed' : prefixes.type !== 'mastercard'}">mastercard</div>
    <div id="amex" ng-class="{'greyed' : prefixes.type !== 'amex'}">discover</div>
    <div id="discover" ng-class="{'greyed' : prefixes.type !== 'discover'}">discover</div>
</div>

作为旁注 - 如果您真的要处理和存储信用卡号，您必须确保您是 PCI合规的托管服务提供商。