Question

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

我试图循环字段费率以获得总数

例如这是我的表

nane +++++++ ID +++++++++++++++++++++++++++++++

joe +++++++++++++++++++++++++++++++++++<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

joe +++++++++++++++++++++++++++++++++++++++<<<<<<<<<<<<<<<<<<<<<<<<

joe ++++++++++++++++++++++++++++++++++++++++<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

joe +++++++++++++++++++++++++++++++++++++++++<<<<<<<<<<<<<<<<<<<<<<<<

这是我的代码。

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

你的帮助会很棒。谢谢

Answer 1

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

JS

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

P.S。

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

Answer 2

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

现在你必须担心如何将字符串转换为整数，并用一种角度必须解释为javascript的语言编写4倍以上的代码。

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

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

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

Answer 4

在没有运气的10小时后，我设法做到了。变得非常简单。

这是代码。

在添加的控制器中

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

感谢大家的帮助

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

4 个答案: