Campo di immissione dell'aggiornamento JS angolare dopo la modifica

Question

Sto provando a creare una semplice calcolatrice in Angolare in cui posso sovrascrivere il totale se lo desidero. Ho questa parte di lavoro, ma quando poi torno a inserire un numero nei campi uno o due il totale non viene aggiornato nel campo.

Ecco il mio jsfiddle http://jsfiddle.net/YUza7/2/

La forma

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

Il javascript

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

Answer 1

È possibile aggiungere la direttiva ng-change ai campi di input. Dai un'occhiata ai documenti example.

Answer 2

Sto indovinando che quando si immette un valore nel campo totali che l'espressione del valore ottiene in qualche modo sovrascritto.

Tuttavia, è possibile adottare un approccio alternativo: creare un campo per il valore totale e quando le modifiche one o two aggiornano tale campo.

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

e modificare la javascript:

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

Esempio violino here.

Answer 3

Creare una direttiva e metterci sopra un orologio.

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

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

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

})

Answer 4

Hai solo bisogno di correggere il formato del codice 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 5

ho scritto una direttiva può essere utilizzata per associare un ng-modello per qualsiasi espressione che vuoi Ogni volta che l'espressione cambia, il modello viene impostato sul nuovo valore.

module.directive('boundModel', function() { 
     return { 
     require: 'ngModel', 
     link: function(scope, elem, attrs, ngModel) { 
      var boundModel$watcher = scope.$watch(attrs.boundModel, function(newValue, oldValue) { 
      if(newValue != oldValue) { 
       ngModel.$setViewValue(newValue); 
       ngModel.$render(); 
      } 
      }); 

      // When $destroy is fired stop watching the change. 
      // If you don't, and you come back on your state 
      // you'll have two watcher watching the same properties 
      scope.$on('$destroy', function() { 
       boundModel$watcher(); 
      }); 
     } 
    }); 

Si può usare nei template in questo modo:

<li>Total<input type="text" ng-model="total" bound-model="one * two"></li>