角添加數據外NG-重複

我有一個角度的應用程序，它具有以下NG-重複：角添加數據外NG-重複

<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重複，使得它增加了從列表中的所有{{detail.student_academic_credit.credit}}。因爲所有的細節都在ng-repeat內部，所以我怎麼做到這一點？

來源

2014-05-19 Abhishek

我建議你使用一對過濾器：角的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。

來源

2014-05-19 16:37:13 gkalpak

嗨..很好的答案。但我不認爲語法正確，因爲{{node}}來自django mptt樹。是否有另一種語法來應用相同的過濾器？ – Abhishek

不幸的是，我對django不熟悉，所以我不確切地知道你的意思。我認爲'node.id'引用'$ scope'中'node'對象的'id'屬性。如果我理解正確，'node.id'將作爲來自django的硬編碼值。在這種情況下，過濾器仍將按預期工作（您可以用硬編碼值替換'node.id'，它仍然有效）。（如果我誤解，只是讓我知道:)） – gkalpak

哦肯定沒問題。由於angular和django都使用{{}}來顯示元素，所以它們使用我的逐字符分隔。 django中的node.id用於django mptt。我會弄清楚。謝謝:) – Abhishek

在已注入服務的控制器中，就像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; 
    }); 
});

來源

2014-05-19 16:33:58 theJoeBiz

角添加數據外NG-重複

回答

相關問題