Question

我有一个角度应用程序，其中包含以下ng-repeat：

<div ng-repeat="detail in mpttdetails">

    <div ng-if="detail.category.id == {{node.id}}" class="list-group">
        {%verbatim%}
            <li class="list-group-item" >
                <div class="row">
                    <div class=".col-lg-2 col-md-2 col-sm-2">
                        {{detail.student_academic_credit.course_name}}
                    </div>
                    <div class=".col-lg-4 col-md-4 col-sm-3">
                        {{detail.student_academic_credit.title}}
                    </div>
                    <div class=".col-lg-2 col-md-2 col-sm-2">
                        {{detail.student_academic_credit.credit}}
                    </div>
                    <div class=".col-lg-2 col-md-2 col-sm-2">
                        {{detail.student_academic_credit.final_grade}}
                    </div>
                    <div class=".col-lg-2 col-md-2 col-sm-3">
                        {{detail.student_academic_credit.term}}
                    </div>  
                </div>
            </li>
        {%endverbatim%}

    </div>

</div>

我的mpttservice这是一个从django应用程序获取数据的服务。在这里，我希望有一个引导徽章：

<span class="badge badge-info">{{sum}}</span>

在ng-repeat之上，以便从列表中添加所有{{detail.student_academic_credit.credit}}。我如何实现这一点，因为所有细节都在ng-repeat ??

中

Answer 1

我建议您使用几个过滤器：Angular的 filter ，用于根据categoryId和一个自定义过滤器来过滤详细信息。

app.filter('sumCredits', function () {
    return function (details) {
        var sum = 0;
        details.forEach(function (item) {
            sum += item.student_academic_credit.credit;
        });
        return sum;
    };
});

<span class="badge badge-info" 
      ng-bind="mpttdetails | filter:{catagory:{id:node.id}} | sumCredits">
</span>
<div ng-repeat="detail in mpttdetails | filter:{catagory:{id:node.id}}">
    {%verbatim%}
        <li class="list-group-item">
            ...

另请参阅此 short demo 。

Answer 2

在注入了服务的控制器中，像ng-repeat一样循环播放并添加到$scope.sum。

app.controller('WhateverCtrl', function($scope, mptt) {
  // Assuming it's an ajax call
  mptt.getDetails().success(function(mpttdetails) {
    $scope.mpttdetails = mpttdetails;

    // Set sum on scope
    var sum = 0;
    angular.forEach(mpttdetails, function(detail) {
      sum = sum + detail.student_academic_credit.credit;
    });
    $scope.sum = sum;
  });
});

ng-repeat之外的角度添加数据

2 个答案: