Javascript 输入和数组_Javascript_Jquery_Angularjs_Data Binding_Angularjs Filter

Javascript 输入和数组

javascript jquery angularjs data-binding

Javascript 输入和数组,javascript,jquery,angularjs,data-binding,angularjs-filter,Javascript,Jquery,Angularjs,Data Binding,Angularjs Filter,我有一个数据列表，当我进行绑定时，我必须在输入的按键事件上调用一个函数（我用这个提琴将我的代码做成角度）： HTML <div ng-app> <div ng-controller="Ctrl"> <ul> <li ng-repeat="item in Data"> <input ng-model="item.Value" ng-keydown="Total()" />

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

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

函数Ctrl（$scope）{
$scope.Data=[
{
价值：1
},
{
价值：2
}];
$scope.TheTotal=0；
$scope.Total=函数（）
{
var返回值=0；
$scope.TheTotal=0；
对于（变量i=0；i<$scope.Data.length；i++）
{
returnValue=returnValue+parseInt（$scope.Data[i].Value）；
}
$scope.TheTotal=返回值；
};
}

但我需要的是，当输入值改变时，进行总结，但它失败了，因为总是丢失最后一个按下的键。。。有什么帮助吗

这是小提琴手：

根据

以下内容将实现此目的：






总计：{{总和（数据）}
函数Ctrl（$scope）{
$scope.Data=[
{
价值：1
},
{
价值：2
}];
$scope.sum=函数（列表）{
var合计=0；
angular.forEach（列表、功能（项）{
总计+=parseInt（项值）；
});
返回总数；
}
}

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






总数：{{总数}

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

标记

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

您可以使用过滤器使其更干净，而不是将其放在控制器中。您的代码按原样工作。所以你在我的帖子上评论说，在sum中传递数据不是必要的，但在你的小提琴中，你无论如何都可以做到。他的代码也按原样工作？为什么他的总功能变为求和？问题不清楚，fiddle与问题代码不匹配。他在问题中的代码可以工作，但是，由于正在使用的事件，它将隐藏在一个字母后面。@KevinB但是。。。问题是我不能使用ng按键事件。。。但是问题是符合代码的。。。其他的注释帮助我找到了works fine的代码。。。不管怎样，谢谢你的建议……为什么要在

ng-

之外使用

sum（Data）

，而他目前使用的方法有效，并且会导致

sum（）

执行频率降低？@KevinB很好的观点。

在一些内部传递数据是不合适的，对于那些想回答问题的人来说，OP的提琴示例的代码与问题中发布的代码不同。对不起，我也没有注意到提琴中的差异。很好。非常优雅的解决方案。
<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>

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