Campo di immissione di aggiornamento JS angolare dopo il cambiamento

Question

Sto cercando di costruire una semplice calcolatrice in angolare in cui posso sovrascrivere il totale se voglio.Ho questa parte funzionante ma quando poi tornai a entrare in un numero in campi uno o due il totale non viene aggiornato nel campo.

Ecco il mio jsfiddle http://jsfiddle.net/yuza7/2/ Il modulo

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

.

The JavaScript

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

.

Answer 1

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

Answer 2

Indovina che quando inserisci un valore nel campo dei totali che l'espressione del valore in qualche modo viene sovrascritta.

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

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

.

e cambia il JavaScript:

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

.

Esempio di violino qui .

Answer 3

Ho scritto una direttiva che puoi utilizzare per legare un modello NG a qualsiasi espressione desiderata.Ogni volta che l'espressione cambia il modello è 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();
          });
        }
    });

.

Puoi usarlo nei tuoi modelli come questo:

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

.

Answer 4

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

Creare una direttiva e metti un orologio su di esso.

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

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

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

.

})