AngularJS：输入值的总和

一尘不染

AngularJS：输入值的总和

angularjs

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

示例：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;
 }

});

阅读 217

2020-07-04

共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;
 }

});

2020-07-04