ng-Modell mit HTML-Reset-Methode misbehaving

Question

Im Versuch, wie ellaborative, wie ich mit meiner Frage kann zu sein ....

Szenario: Ich habe drei Eingabefelder in meiner HTML-Seite Zwei von ihnen sind zu Benutzer eingegebene Werte akzeptieren und der dritte bindet (addiert) diese zwei Werte.

bisher getan: habe ich zunächst <input value="{{value1+value2}}" id="value3"/>, die die Werte als String nahm; löste dieses Problem, indem die Zeichenkette durch 0 subtrahiert wurde. Aber diese berechneten Werte gehen nicht weg, selbst wenn man die Reset-Taste benutzt.

Dann jemand hier auf SOF sagte mir, <input ng-model="(value1-0)+(value2-0)" id="value3"/> zu verwenden, die funktioniert, aber ich bemerkte, dass, auch wenn die Werte optisch verschwinden das Modell immer noch einen gewissen Wert.

(Wenn ich einen Wert in das erste Eingabefeld eingeben, addiert das dritte berechnete Feld den Wert des eingegebenen Feldes mit dem vorherigen Wert des zweiten Eingabefelds (Wert, den das zweite Feld vor dem Zurücksetzen hatte)

HINWEIS:
Reset-Methode, die Werte der ersten beiden Benutzer eingegebenen Felder zurücksetzt, nicht jedoch die des dritten calcualtion Feld während <input value="{{value1+value2}}" id="value3"/> OR <input ng-bind="value1+value2" id="value3"/>

während der Verwendung, wenn <input ng-model="(value1-0)+(value2-0)" id="value3"/> das berechnete Feld unter Verwendung optisch gelöscht wird aber wenn Wenn Sie einen Wert in eines der vom Benutzer eingegebenen Felder eingeben (Wert1 oder Wert2), fügt das berechnete Feld die eingegebene Zahl mit der vorherigen Zahl ein, die das Feld enthält.

Ich habe versucht, viele Möglichkeiten, um dieses Problem zu lösen, aber ohne Erfolg .... kann mich bitte jemand führen?

Vielen Dank im Voraus .....

Answer 1

Hier ist ein einfaches fiddle. Folge dem Link und sieh es dir an.

Um nur Zahlenwerte in den Benutzer eingegeben Felder zu haben, habe ich HTML5-Nummern-Eingaben, die in jedem neueren Browser verfügbar.

<div ng-controller="MyCtrl"> 
    <input type="number" ng-model="value1" /> 
    <input type="number" ng-model="value2" /> 
    <input type="text" ng-model="value1 + value2" /> 
    <button type="button" ng-click="reset()">RESET</button> 
</div> 

Und wie für die Javascript, hier ist mein Controller:

var myApp = angular.module('myApp', []); 

myApp.controller('MyCtrl', MyCtrl) 

function MyCtrl($scope) { 
    $scope.value1 = ''; 
    $scope.value2 = ''; 
    $scope.value3 = ''; 

    $scope.reset = function() { 
    $scope.value1 = ''; 
    $scope.value2 = ''; 
    $scope.value3 = ''; 
    }; 
} 

Die drei Werte werden zunächst als leere Strings initialisiert und auf ng-Klick auf die Reset-Taste, werden sie wieder zunichte gemacht.

HINWEIS: Der Einfachheit halber habe ich Zahleneingaben verwendet, anstatt zu versuchen, irgendeine Art von Javascript-Validierung zu implementieren, die ich für Produktionsebene vorschlagen würde. Der Punkt meiner Antwort war nur, das Prinzip mit den grundlegendsten Konzepten zu erklären.