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

Question

J'essaie de créer une calculatrice simple dans Angular dans laquelle je peux remplacer le total si je le souhaite.Cette partie fonctionne, mais lorsque je reviens ensuite pour saisir 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 ng-change directive aux champs de saisie.Jetez un oeil à la documentation exemple.

Answer 2

Je suppose que lorsque vous entrez une valeur dans le champ des totaux, cette expression de valeur est écrasée d'une manière ou d'une autre.

Cependant, vous pouvez adopter une approche alternative :Créez un champ pour la valeur totale et quand soit one ou two les modifications mettent à jour ce champ.

<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

J'ai écrit une directive que vous pouvez utiliser pour lier un modèle NG à une expression souhaitée.Chaque fois que l'expression change, le modèle est défini sur la nouvelle valeur.

 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();
          });
        }
    });

Vous pouvez l'utiliser dans vos modèles comme celui-ci:

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

Answer 4

Vous avez juste besoin de corriger le format de votre 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

Créer une directive et mettre une montre dessus.

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

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

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

})