Wie beschränke ich den Wert einer Eingabe mit Javascript?

Question

Ich brauche einen Eingangswert, der auf [1, 5000000] begrenzt ist. Ich möchte es programmatisch machen. Ich verwende AngularJS für meine Webanwendung. Hier ist der Code, den ich schrieb:

html

<input ng-change="checkLimit()" type="number" min="1" max="5000000" name="input" ng-model="data.flips" required/> 

js

angular.module("app", []).controller("controller", function($scope) { 
    $scope.checkLimit = function() { 
     $scope.data.flips = $scope.data.flips > 5000000 ? 5000000 : 
     $scope.data.flips; 
     $scope.data.flips = $scope.data.flips < 1 ? 1 : $scope.data.flips; 
    } 
}); 

Ich weiß sicher, dass die Funktion ausgeführt wird, aber der Wert in das Eingabefeld und die Variable wird nicht aktualisiert. Ich bin relativ neu in Angular, also gibt es wahrscheinlich ein elementares Konzept, das ich vermisse.

Answer 1

Sie müssen min entfernen und max Attribute, aufgrund dieser Validierung erlaubt nicht die ng-Modell zu ändern.

<input ng-change="checkLimit()" type="number" min="1" max="5000000" name="input" ng-model="data.flips" required 
 
          ng-model-options="{ allowInvalid: true, updateOn: 'blur' }"/>

Bitte beachte, dass wir verwenden ng-Modell-Optionen, also:

Alternative, wenn Sie die min und max halten möchten, können Sie ng-Modell-Optionen wie folgt hinzufügen wir müssen die passende eckige Version verwenden> = 1.4

Answer 2

Edit: cccross' Antwort für eine saubere Version

Sie entkommen müssen sehen, den aktuellen Zyklus verdauen, wie ich glaube nicht, dass Winkel wird ein Element mit einem neuen Eigenschaftswert aktualisieren, wenn der Wert Eigenschaft ist aktualisiert in einem Änderungsereignis von diesem Element.

Es kann sauberere Wege geben, um das zu tun, was Sie verlangen; Dieses Beispiel funktioniert jedoch. Ich habe die Eingabeattribute 'min' und 'max' entfernt und die Änderungslogger-Logik in einen '$ timeout' -Aufruf verschoben. $ timeout ist als Controller-Argument enthalten. $ timeout wird einen weiteren Digest-Zyklus auslösen, der Ihre Eingabe aktualisiert.

angular.module("app", []).controller("controller", function($scope, $timeout) { 
    $scope.checkLimit = function() { 
     $timeout(() => { 
      $scope.data.flips = $scope.data.flips > 5000000 ? 5000000 : 
      $scope.data.flips; 
      $scope.data.flips = $scope.data.flips < 1 ? 1 : $scope.data.flips; 
     }) 
    } 
}); 

fiddle