输入的总和数组答案

【问题标题】：Sum array of inputs输入的总和数组
【发布时间】：2015-11-11 23:29:31
【问题描述】：

我有一个数据列表，当我进行绑定时，我必须在输入的按键事件上调用一个函数（我用这个小提琴制作了有角度的代码）：

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>

角度

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

【问题讨论】：

你可以使用过滤器让它更干净，而不是把它放在控制器里
您的代码按原样工作。 jsfiddle.net/ygkhh5q5/9
所以你对我的帖子发表评论说，在 sum 中传递数据不是必需的，但在你的小提琴中你还是这样做了。他的代码也按原样工作吗？为什么他的总函数变成了sum？
问题不清楚，fiddle 与有问题的代码不匹配。他在问题中的代码可以工作，但是由于正在使用的事件，它将在一个字母后面。
@KevinB 但是...好吧，问题是我不能使用 ng-keypress 事件...但是问题与代码一致...其他 cmets 帮助我定位代码工作正常...无论如何感谢您的建议...

标签： javascript jquery angularjs data-binding angularjs-filter

【解决方案1】：

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

标记

<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

【讨论】：

不错。非常优雅的解决方案。

【解决方案2】：

根据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;
     }
}

【讨论】：

当他当前使用的东西有效并且会导致sum() 的执行频率降低时，为什么要切换到在ng-<event> 之外使用sum(Data)？
@KevinB 好点..在一些内部传递Data 是不合适的
好吧，对于那些想要回答的人来说，问题是 OP 的小提琴示例与问题中发布的代码不同。
对不起，我也没有注意到小提琴中的差异。

【解决方案3】：

您用于更新总数的事件在输入值实际更改之前触发。您应该改为使用 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>

【讨论】：