输入总和数组

Question

我有一个数据列表，当我进行绑定时，我必须在输入的按键事件上调用一个函数（我在 angular 中用这个 fiddle 编写了我的代码）：

HTML

<div ng-app>
  <div ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in Data">
            <input ng-model="item.Value" ng-keydown="Total()" />

            </li>
        </ul>
      Total: {{TheTotal}}
  </div>
</div>

ANGULAR

function Ctrl($scope) {
  $scope.Data = [
    {
        Value: 1
    },
    {
        Value: 2
    }];
    $scope.TheTotal= 0;
    $scope.Total = function()
    {
        var returnValue = 0;
        $scope.TheTotal  = 0;       

        for(var i = 0; i < $scope.Data.length; i++)
        {
            returnValue = returnValue + parseInt($scope.Data[i].Value);                  
        }

        $scope.TheTotal =  returnValue;        
    };
}

但是我需要的是当输入的值发生变化时，然后进行总结但它失败了，因为总是丢失最后按下的键......任何帮助??

这是 fiddler: Fiddler

Answer 1

根据This thread here

以下内容可以解决问题：http://jsfiddle.net/ygkhh5q5/6/

<div ng-app>
  <div ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in Data">
            <input ng-model="item.Value" />

            </li>
        </ul>
      Total: {{sum(Data)}}
  </div>
</div>

function Ctrl($scope) {
  $scope.Data = [
    {
        Value: 1
    },
    {
        Value: 2
    }];
    $scope.sum = function(list) {
      var total=0;
      angular.forEach(list , function(item){
        total+= parseInt(item.Value);
      });
      return total;
     }
}

Answer 2

您用于更新总数的事件在输入值实际更改之前触发。您应该改为使用 keyup 事件或 change 事件。

http://jsfiddle.net/ygkhh5q5/12/

<div ng-app>
  <div ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in Data">
            <input ng-model="item.Value" ng-change="Total()" />

            </li>
        </ul>
      Total: {{TheTotal}}
  </div>
</div>

Answer 3

不是唯一的答案，但为了代码的可重用性，我将把它创建为过滤器，以便任何其他人都可以使用它

标记

<body ng-app="app">
  <div ng-controller="myCtrl">
    <ul>
        <li ng-repeat="item in Data">
            <input ng-model="item.Value"/>
        </li>
        </ul>
      Total: {{Data | total: 'Value'}}
  </div>

</body>

代码

.filter('total', function(){
  return function(array, prop){
    var total = 0;
    angular.forEach(array, function(value){
      total = total + parseInt(value[prop]);
    })
    return total;
  }
})

Demo Plunkr

输入总和数组

Sum array of inputs

javascript

data-binding

jquery

angularjs

angularjs-filter