更改后的angularJS更新input字段

我正在尝试在Angular中构build一个简单的计算器，如果需要的话，我可以重写这个计算器。 我有这部分工作，但是当我回去在一个或两个字段中input一个数字时，总计不会在现场更新。

这是我的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指令添加到input字段。 看看文档的例子 。

Answer 2

我猜测，当你input一个值到总值字段值expression式以某种方式被覆盖。

但是，您可以采取其他方法：为总值创build一个字段，并在其中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; }); } 

示例小提琴在这里 。

Answer 3

我写了一个指令，可以用来将ng模型绑定到你想要的任何expression式上。 每当expression式改变时，模型被设置为新的值。

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

你可以在你的模板中使用它：

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

Answer 4

你只需要改正你的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

创build一个指令，并把它看。

 app.directive("myApp", function(){ link:function(scope){ function:getTotal(){ ..do your maths here } scope.$watch('one', getTotals()); scope.$watch('two', getTotals()); } 

}）