So ändern Sie den Eingabewert auf den Maximalwert, wenn der Wert {max} erreicht wird AngularJS

Question

Ich habe ein Formular, das ein Eingabefeld enthält, in dem Sie den Geldbetrag eingeben können. Es hat max. und wenn der Benutzer eine Geldmenge eingibt, die größer als der Maximalwert ist, möchte ich den NG-Modellparameterwert auf den Maximalwert setzen, der die Antwort einer RESTFull-API ist.

Direkte Zuordnung des JSON-Objektwerts zum max-Attribut. Der maximale Wert wird in eine Zeichenfolge als Antwort der API eingegeben.

Ich habe Währungsfilter beim Zuweisen der Attributwerte verwendet.

Wie legt man den maximalen Attributwert auf den Wert des ngModel-Objekts fest? Wenn der Benutzer den größeren Wert als den maximalen Wert eingibt? Gibt es eine Möglichkeit, es sofort zu ändern und gleichzeitig das Eingabefeld zu aktualisieren?

Bitte sagen Sie mir auch, wenn ich Filter richtig verwende? oder nicht?

<input type="text" name="payableamount" class="form-control input-lg" 
         min="{{amount | currency:'':2}}" 
         max="{{billObj.amount | currency:'':2}}" 
         ng-model="form.bidAmount" 
         ng-required="true" ui-number-mask> 

Answer 1

Shop der Wert von maxAmount, die Sie von API bekam und validieren es innerhalb der Funktion 'checkAmount'

1.Using ngKeyup:

//html  
<input ng-model="amount" ng-keyup="checkAmount($event,amount)"/> 

//js 
function MyCtrl($scope, $log) { 

    $scope.checkAmount = function(e,amt) { 
     if(amt>10){ //assuming maxAmount is 10 
      $scope.amount = 10; 
      e.preventDefault(); 
     } 
    }; 
} 

2. Mit der Richtlinie,

<input check-max ng-model="amount"/> 


myApp.directive('checkMax', function() { 
    return { 
    restrict: 'AE', //attribute or element, 
    require: 'ngModel', 
    link:function(s,e,a,ngModel){ 
     e.bind('keyup',function(event){ 
     if(ngModel.$modelValue>10){ 
      event.preventDefault(); 
      ngModel.$setViewValue(10); 
      ngModel.$render(); 
     } 
     }); 
    } 
    }; 
}); 

Fiddle (mit ng-keyup): http://jsfiddle.net/r74a5m25/202/

Fiddle (using-Direktive): http://jsfiddle.net/r74a5m25/203/