変更後の角型JS更新入力フィールド

Question

私は必要に応じて合計をオーバーライドすることができる、角度の単純な電卓を作成しようとしています。私はこの部分が働いているが、フィールドに1〜2の数字を入力して戻ると、そのフィールドで合計が更新されない。ここで

は私jsfiddleはhttp://jsfiddle.net/YUza7/2/

私はあなたが合計フィールドに値を入力するとその値式が何らかの形で取得することを推測しているフォーム

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

javascriptの

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

Answer 1

ng-changeディレクティブを入力フィールドに追加できます。ドキュメントexampleをご覧ください。

Answer 2

です上書きされます。

ただし、別のアプローチをとることもできます。合計値のフィールドを作成し、oneまたはtwoのいずれかのフィールドを更新すると、そのフィールドが更新されます。

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

とJavaScript変更：

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

例フィドルhereを。

Answer 3

ディレクティブを作成し、ディレクティブを作成してください。

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

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

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

}）

Answer 4

あなたはただ、私はあなたがいずれかにNG-モデルをバインドするために使用することができますディレクティブを書いて、あなたの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

のフォーマットを修正する必要がありますあなたが望む表現。式が変わるたびに、モデルは新しい値に設定されます。

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

あなたはこのようなあなたのテンプレートでそれを使用することができます：@Martinは、あなたがそれを得ることができるように書き込み可能な値（そうでない機能）への入力をバインドする必要があり、言ったように

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