基于Angular中的另一个文本字段更改输入值

Question

这里是新增的Angular。我需要根据“cc_number”输入字段的第一个数字来更改隐藏输入“cc_card”的值。防爆。如果用户键入5 CC_NUMBER隐藏的输入值将是“万事达卡”，如果用户键入一个4个隐藏的输入值将是“签证”等等......

这里是我的设置：

<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类。尝试将输入的值更改为，然后和并且您会看到根据输入的值可以看到相关的信用卡名称。

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兼容的托管服务提供商。

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>