如何获得 ng-init 和 ng-repeat 的总和 - angularjs答案

【问题标题】：How do I get the total sum in ng-init and ng-repeat - angularjs如何获得 ng-init 和 ng-repeat 的总和 - angularjs
【发布时间】：2016-06-29 01:22:26
【问题描述】：

在 ng-init 和 ng-repeat angularjs 中遇到问题

我正在尝试循环字段费率以获得总数

例如这是我的桌子

nane +++++++id+++++++率

乔 +++++++++1+++++++3

乔 +++++++++2+++++++3

乔 +++++++++3+++++++3

乔 +++++++++4+++++++3

这是我的代码。

<table>
<tr>
  <td>name</td>
  <td>rate</td>

</tr>
<tr ng-repeat="item in videos">
<td>{{item.name}}</td>
  <td ng-init="videos.total.rate = videos.total.rate + item.rate">{{item.rate}}</td>

</tr>
<tr>
  <td>Total</td>
  <td>{{videos.total.rate}}</td>

</tr>

我得到的结果是 3333 而不是 12 全部加在一起

这是有问题的行

<td ng-init="videos.total.rate = videos.total.rate + item.rate">{{item.rate}}</td>

如果我把它改成一个数字就可以了。

<td ng-init="videos.total.rate = videos.total.rate + 3">{{item.rate}}</td>

你的帮助会很棒。谢谢

【问题讨论】：

各个费率的值是多少？我怀疑ng-init 不适用于您的情况。
费率都是3333
我不认为ng-init 将每个新项目视为ng-repeat 迭代。 Yoh 可能希望将求和逻辑移动到您的控制器中。
<td ng-init="videos.total.rate = videos.total.rate + item.rate">{{item.rate}}</td> -------------- <td ng-init="videos.total.rate = videos.total.rate + This==> item.rate <=== This is the problem i think it come back as a string ">{{item.rate}}</td>

标签： javascript angularjs angularjs-directive ionic-framework

【解决方案1】：

在控制器中尝试这样的事情。

   $scope.RateTotal= 0;
    for (var i = 0; i < data.length; i++) {
    $scope.RateTotal= $scope.RateTotal + data[i].rate;
   }

HTML

  <p>{{RateTotal}}</p>

上面的选项更好，但如果你想使用 ng-init 使用类似这样的东西。

<table ng-init="RateTotal = 0">
 <thead>
<th>Rate</th>
 </thead>
<tbody>
<tr ng-repeat="item in videos">
<td ng-init="$parent.RateTotal= $parent.RateTotal + item.rate">{{item.rate}}</td>
</tr>
<tr>
       <thead>
            <tr>
            <th>Total</th>
            <th>{{RateTotal}}</th>
            </tr>
       </thead>
</tr>
</tbody>
</table>

附言

这个指令可以被滥用来添加不必要的逻辑量你的模板。 ngInit 只有少数合适的用法，例如至于 ngRepeat 的别名特殊属性，如演示中所见以下;以及通过服务器端脚本注入数据。除了这些在少数情况下，您应该使用控制器而不是 ngInit 来初始化范围内的值。 - ngInit

【讨论】：

这仍然返回 03333 作为结果。
可能是因为这些值是字符串而不是数字。你检查了吗？
@user1697533 在此期间您是否设法解决了问题？

【解决方案2】：

将此逻辑移到控制器中。这就是它的用途。视图应该显示数据。

现在您必须担心如何将字符串转换为整数并用 Angular 必须将其解释为 javascript 的语言编写 4 倍以上的代码。

您在此处添加的复杂性将很有趣。

但您可能想继续做错事，在这种情况下应该可以：<table ng-init='videos.total = {"rate": 0}'>

【讨论】：

6 小时前我试图做同样的事情，但没有运气。现在就去睡觉，我没想到会这么难，或者我只是累了。
如果将其更改为 <table ng-init='videos.total = {"rate": 0}'> 我得到的结果为 03333
太糟糕了，将求和逻辑移至控制器并收工。您可以使用 map 和 reduce

【解决方案3】：

定义一个过滤器来计算总数：

app.filter('calculateRateTotal',function(){
    return function(input){
        var total = 0;
        angular.forEach(input,function(value,key){
            total = total+value.rate;
        });
        return total;
    };
});

HTML：

<td ng-bind="videos | calculateRateTotal"></td>

【讨论】：

哇，我们忘了怎么写代码了吗？每次需要在控制器中做某事时，是否都会创建一个新的角度过滤器？
这将重新计算每个摘要。小列表没问题，但大列表不是一个好主意...

【解决方案4】：

在 10 小时的运气不佳之后，我设法把它弄对了。变得非常简单。

这是代码。

在Controller中添加

$scope.getTotal = function(){
var total = 0;
for(var i = 0; i < $scope.videos.length; i++){
    var item = $scope.videos[i];
    total += (item.rate*1);
}
return total;   }

和 HTML

<table>

        <tr>
            <th>Rate</th>
        </tr>


        <tr ng-repeat="item in videos">
            <td>{{item.rate}}</td>

        </tr>           
        <tr>              
            <td>Total: {{ getTotal() }}</td> 
        </tr>

    </table>

感谢大家的帮助

【讨论】：