Champ de saisie de mise à jour JS angulaire après modification

Question

J'essaie de construire une calculatrice simple dans Angular dans laquelle je peux remplacer le total si je veux. Cette partie fonctionne, mais lorsque je retourne ensuite pour entrer un nombre dans les champs un ou deux, le total n’est pas mis à jour dans le champ.

Voici mon jsfiddle http://jsfiddle.net/YUza7/2/

La forme

 <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>
 

Le javascript

 function TodoCtrl($scope) {
    $scope.total = function(){
        return $scope.one * $scope.two;
    };
}
 

Answer 1

Vous pouvez ajouter une directive ng-change aux champs de saisie. Regardez l' exemple de la documentation.

Answer 2

J'imagine que lorsque vous entrez une valeur dans le champ des totaux, cette expression est en quelque sorte remplacée.

Cependant, vous pouvez adopter une autre approche: créez un champ pour la valeur totale et lorsque les modifications apportées sont one ou two , ce champ est mis à jour.

 <li>Total <input type="text" ng-model="total">{{total}}</li>
 

Et changez le javascript:

 function TodoCtrl($scope) {
    $scope.$watch('one * two', function (value) {
        $scope.total = value;
    });
}
 

Exemple de violon ici .

Answer 3

Il vous suffit de corriger le format de votre code HTML

 <form>
    <li>Number 1: <input type="text" ng-model="one"/> </li>
    <li>Number 2: <input type="text" ng-model="two"/> </li>
        <li>Total <input type="text" value="{{total()}}"/>  </li>      
    {{total()}}

</form>
 

http://jsfiddle.net/YUza7/105/

Answer 4

Créez une directive et veillez dessus.

 app.directive("myApp", function(){
link:function(scope){

    function:getTotal(){
    ..do your maths here

    }
    scope.$watch('one', getTotals());
    scope.$watch('two', getTotals());
   }
 

})