Angular JS-Aktualisierungseingabefeld nach Änderung
-
12-12-2019 - |
Frage
Ich versuche, in Angular einen einfachen Rechner zu erstellen, in dem ich die Gesamtsumme überschreiben kann, wenn ich möchte.Bei mir funktioniert dieser Teil, aber wenn ich dann zurückgehe, um in den Feldern eins oder zwei eine Zahl einzugeben, wird die Gesamtsumme im Feld nicht aktualisiert.
Hier ist meine jsfiddle http://jsfiddle.net/YUza7/2/
Die Form
<div ng-app>
<h2>Calculate</h2>
<div ng-controller="TodoCtrl">
<form>
<li>Number 1: <input type="text" ng-model="one">
<li>Number 2: <input type="text" ng-model="two">
<li>Total <input type="text" value="{{total()}}">
{{total()}}
</form>
</div>
</div>
Das Javascript
function TodoCtrl($scope) {
$scope.total = function(){
return $scope.one * $scope.two;
};
}
Lösung
Du kannst hinzufügen ng-change
Direktive für Eingabefelder.Schauen Sie sich die Dokumente an Beispiel.
Andere Tipps
Ich vermute, dass dieser Wertausdruck irgendwie überschrieben wird, wenn Sie einen Wert in das Summenfeld eingeben.
Sie können jedoch einen alternativen Ansatz wählen:Erstellen Sie ein Feld für den Gesamtwert und wann one
oder two
Änderungen aktualisieren dieses Feld.
<li>Total <input type="text" ng-model="total">{{total}}</li>
Und ändern Sie das Javascript:
function TodoCtrl($scope) {
$scope.$watch('one * two', function (value) {
$scope.total = value;
});
}
Beispiel Geige Hier.
Ich habe eine Richtlinie geschrieben, mit der Sie ein NG-Modell an einen beliebigen Ausdruck binden können.Wenn der Ausdruck ändert, wird das Modell auf den neuen Wert eingestellt. generasacodicetagpre.
Sie können es in Ihren Vorlagen so verwenden: generasacodicetagpre.
Sie müssen nur das Format Ihres HTML-Dateien korrigieren generasacodicetagpre.
Erstellen Sie eine Richtlinie und legen Sie eine Uhr auf. generasacodicetagpre.
})