在AngualJS ng-repeat中分組收藏？

我有一個非常簡單的場景，其中有一組記錄可用，我需要用簡單的ng-repeat來顯示它們。不過，我需要按屬性分組的記錄，而我的目標並不是必須更改集合才能完成此分組。我的想法是，可以應用某種類型的過濾器，但在實踐中過濾器，過濾器，數據和不分組。有沒有辦法擁有一個集合，並簡單地分組和重複？在AngualJS ng-repeat中分組收藏？

真正的黑客jsFiddle在這裏與我正在嘗試做什麼。

http://jsfiddle.net/bryangrimes/RufQh/5/

總之這個想法是沿着線：

<ul> 
     <li ng-repeat="log in logs grouped by log.dept"> 
     <h4>{{log.dept}}</h4> 
     {{log.name}} worked {{log.hours}} this week 
     </li>    
    </ul>

更新：那麼到底我們已經使用taffyDB對房屋的原始數據集，從而使剛剛擴大。

$.each($scope.logs, function() { 
     var log = $(this)[0]; 

     // build angular friendly data structure 
     log.workLogsDB = TAFFY(log.worklogs); 
     log.deptLogs = []; 

     $.each(log.workLogsDB().distinct('department').sort(), function() { 
      var dept = $(this)[0].toString(); 
      var cost = log.workLogsDB({department:dept}).sum('cost'); 
      var hours = log.workLogsDB({department:dept}).sum('hours'); 
      var items = log.workLogsDB({department:dept}).get(); 

      log.deptLogs.push({ 
       department: dept, 
       total_cost: cost, 
       total_hours: hours, 
       line_items: items 
      }); 
     }); 
    });

和HTML渲染：

<div ng-repeat="log in logs"> 
       <h3 onclick="$('#{{log.project}}').slideDown()">  
        {{log.project}} hours:{{log.hours}} cost: ${{log.cost}} 
       </h3> 
       <ul id="{{log.project}}" style="display: none;"> 
        <div ng-repeat="log in log.deptLogs"> 
         <span style="font-weight: bold; text-transform: capitalize;">{{ log.department }} - Team Cost: ${{ log.total_cost }}, Team Hours: {{ log.total_hours }} </span> 
         <li ng-repeat="line in log.line_items"> 
          {{line.employee}} {{line.hours}} hours 
         </li> 
         <br> 
        </div> 
       </ul> 
      </div>

來源

2012-12-28 BryanGrimes

我認爲你需要創建集合的排序副本，然後NG-不斷重複該排序集合。這是a fiddle我前一段時間寫過，當別人提出類似的問題時。要點：

function MyCtrl($scope, orderByFilter) { // inject orderByFilter 
    $scope.sortedLogs = orderByFilter($scope.logs, '+dept'); 
}

HTML：

<ul> 
    <li ng-repeat="log in sortedLogs"> 
     <ng-switch on="$first || log.dept != sortedLogs[$index-1].dept"> 
      <div ng-switch-when="true" class="group"><h4>{{log.dept}}</h4> 
     </ng-switch> 
     {{log.name}} worked {{log.hours}} this week 
    </li> 
</ul>

來源

2012-12-28 21:49:40

所以這正是我想要了解如何處理像這樣分組的東西的答案。最後，我認爲我的實際數據結構對於我想要做的事情來說有點複雜，但是我今天會討論它併發布我得到的結果。非常感謝。 – BryanGrimes

我喜歡馬克的回答，我的戰術通常是重新洗牌的集合，以使渲染更容易。

下面是一個小提琴表示方法http://jsfiddle.net/RufQh/12/

var sorted = []; 
logs.forEach(function(log){if (!sorted[log['dept']]) {sorted[log['dept']]= []} sorted[log['dept']].push(log);}) 

$scope.depts=[]; 
for(var dept in sorted) { 
    $scope.depts.push({name:dept,items:sorted[dept]}); 
}

一旦我有這樣的話，我會呈現W /嵌套循環

<li ng-repeat="dept in depts">{{dept.name}}<br/> 
      <ul> 
       <li ng-repeat="log in dept.items">{{log.name}} worked {{log.hours}} this week as a(n) {{log.dept}}</li> 
      </ul> 
    </li>

轉換數據更容易了一個框架，無論是地圖/減少或像taffyBD的東西。這種方法的缺點是多次傳遞數據（而不是單一排序）以及增加角度範圍的創建。

好處是，它可以更容易呈現內容，因爲它是在控制器中組織的。

來源

2012-12-30 13:57:41 aheld

您已將taffydb用於數據，因此它可能與您無關，但其他正在尋找此功能的用戶可能會發現ForerunnerDB（http://www.forerunnerdb.com）的使用，因爲它具有高級類似MongoDB的查詢並且也支持數據視圖您可以通過查詢過濾集合並從中生成一個視圖。

視圖包含來自底層集合的最新過濾數據，如果集合中的數據發生更改，視圖也會自動更新。

來源

2015-02-05 13:06:19

在AngualJS ng-repeat中分組收藏？

回答

相關問題