javascript - 输入的总和数组

标签 javascript jquery angularjs data-binding angularjs-filter

我有一个数据列表,当我进行绑定(bind)时,我必须在输入的按键事件上调用一个函数(我用这个 fiddle 制作了 Angular 代码):

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

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

这是 fiddle 手:Fiddler

最佳答案

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

标记

<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

关于javascript - 输入的总和数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32082385/

相关文章:

javascript - MediaWiki/OOUI : SelectWidget for multiple selections?

javascript - 动态客户关系管理。子网格中完全自定义的 FetchXml

javascript - 未捕获的类型错误 : Object [object Object] has no method 'submit'

Javascript/jQuery : remove shape/path from canvas

javascript - 在javascript中向按钮添加 'data-toggle'属性

jquery - 设置新元素的位置,同时悬停元素

javascript - 如何在 Angular 中禁用 img?

javascript - 多个 JavaScript 函数的作用域

javascript - 在继续之前需要 FineUploader 方法 uploadStoredFiles 完成

javascript - 在 AngularJS 指令中获取元素父高度