Question

这里是Angular的新手。我需要更改隐藏输入的值＆＃39; cc_card＆＃39;基于＆＃39; cc_number＆＃39;的第一个数字输入字段。防爆。如果用户在cc_number中键入5，则隐藏的输入值将为“MasterCard”，如果用户键入4，则隐藏的输入值将为“＆＃39; Visa＆＃39;等...

这是我的设置：

<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并传递将验证输入的函数。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

作为旁注 - 如果您实际上要处理和存储信用卡号，则必须确保您是符合PCI标准的托管服务提供商。

Answer 2

  <div  ng-app="appName" ng-controller="appCtrl" 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-keyup="vm.updateInput(prefixes.cards)">
             <input type="hidden"  name="cc_card" id="cc_card"  ng-model="prefixSelected"/>

         </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>
     </div>
     <script>
         var app = angular.module('appName', []);
         app.controller('appCtrl', function($scope) {
        $scope..updateInput = function(value){
        console.log('true3', value);
        // $scope.prefixes = {visa: '4', mastercard:'5', amex:'3', discover:'6'};
        switch (value){
            case '4':
                $scope.prefixSelected = 'visa';
                break;
            case '5':
                $scope.prefixSelected = 'mastercard';
                break;
            case '3':
                $scope.prefixSelected = 'amex';
                break;
            case '6':
                $scope.prefixSelected = 'discover';
                break;
            default:{
                $scope.prefixSelected = '';
                break;
            }
        }
    };
     });
     </script>

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

2 个答案: