Eingabewert basierend auf einem anderen Textfeld in Angular ändern

Question

Neu hier zu Angular. Ich muss den Wert meiner versteckten Eingabe 'cc_card' basierend auf der ersten Ziffer des Eingabefelds 'cc_number' ändern. Ex. Wenn ein Benutzer 5 in cc_number der versteckten Eingänge Wert ‚Mastercard‘, wenn ein Benutzer ein 4 die versteckten Eingänge Wert wird ‚Visum‘ etc ...

Hier ist mein Setup:

<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

Sie können ngModel zum versteckten Eingang hinzufügen und das Modell dieses Eingangs ändern, wenn sich der Wert #cc_number ändert.

Um die Änderung zu erkennen, fügen Sie ngChange zu #cc_number hinzu und übergeben eine Funktion, die die Eingabe validiert.

In diesem Beispiel verwende ich den tatsächlichen Wert, der an den versteckten Eingang gebunden ist, um die Klasse .greyed von den Kreditkarten zu wechseln. Versuchen Sie, den Wert des Eingangs in , dann und zu ändern, und Sie werden sehen, dass der entsprechende Kreditkartenname entsprechend dem Wert der Eingabe sichtbar wird.

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>

Als Nebenbemerkung - Wenn Sie wirklich sicher, dass Sie müssen zu verarbeiten und zu speichern Kreditkartennummern gehen, dass Sie ein PCI konformen Hosting-Provider sind.

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>