AngularJS：输入值的总和答案

【问题标题】：AngularJS: Sum of Input valuesAngularJS：输入值的总和
【发布时间】：2014-06-08 17:53:03
【问题描述】：

我有一个简单的输入列表，绑定到显示良好的项目列表。当我更改输入中的值时，总和不会更新？？

示例：http://plnkr.co/edit/B7tEAsXSFvyLRmJ5xcnJ?p=preview

HTML

<body ng-controller="MainCtrl">
 <div ng-repeat="item in items">
   <p><input type=text value="{{item}}"></p>
 </div>
 Total: <input type=text value="{{sum(items)}}">
</body>

脚本

app.controller('MainCtrl', function($scope) {
  $scope.items = [1,2,5,7];

 $scope.sum = function(list) {
  var total=0;
  angular.forEach(list , function(item){
    total+= item;
  });
  return total;
 }

});

【问题讨论】：

标签： jquery angularjs

【解决方案1】：

检查这个小提琴的实现：http://jsfiddle.net/9tsdv/

注意事项：

在输入元素中使用 ng-model 指令，以允许在项目模型和输入元素之间进行双向绑定
由于 ng-repeat 创建了一个子范围，并且 items 数组中的元素是原始类型或值类型，因此它们在第一个摘要周期中按值复制，然后对输入字段所做的任何更改都不会反映在总和，因为修改现在必然会在 ng-repeat 创建的子范围中呈现变量。（有关更多详细信息，请参阅有关范围继承的其他参考资料）

HTML：

<body ng-controller="MainCtrl">
 <div ng-repeat="item in items">
   <p><input type=text ng-model="item.value"></p>
 </div>
 Total: <input type=text value="{{sum(items)}}">
</body>

控制器代码：

app.controller('MainCtrl', function($scope) {
  $scope.items = [ { value: 1 }, { value: 2 }, { value: 5}, { value: 7 } ];

 $scope.sum = function(list) {
  var total=0;
  angular.forEach(list , function(item){
    total+= parseInt(item.value);
  });
  return total;
 }

});

【讨论】：

【解决方案2】：

<body ng-controller="MainCtrl">
 <div ng-repeat="item in items">
   <p><input type=text ng-model="item"></p>
 </div>
 Total: <input type=text value="{{sum(items)}}">
</body>

你需要使用 ng-model...What's the difference between ng-model and ng-bind

【讨论】：

嗯。我添加了一个 Plunker，但代码没有 2 路绑定，plnkr.co/edit/B7tEAsXSFvyLRmJ5xcnJ?p=preview 你能看看吗？
对不起，我在总结部分错了，我们不能在函数上创建 ng 模型，而 Robin 使用对象数组是正确的。我找到了我的代码失败并且他的工作的原因这里：stackoverflow.com/questions/15488342/…