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