4

レコードのコレクションが利用できる非常に単純なシーンがあり、単純な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>
4

3 に答える 3

7

コレクションのソートされたコピーを作成してから、そのソートされたコレクションをng-repeatする必要があると思います。これは、私が少し前に誰かが同様の質問をしたときに書いたフィドルです。重要なポイント：

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-28T21:49:40.877 に答える
1

私はマークの答えが好きです。私の戦術は通常、レンダリングを簡単にするためにコレクションを再シャッフルすることです。

これがそのアプローチを示すフィドルです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]});
}

これを入手したら、ネストされたループを使用してレンダリングします

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

map / reduceまたはtaffyBDのようなフレームワークを使用すると、データの変換が簡単になります。このアプローチの欠点は、データを複数回通過すること（単一の並べ替えではなく）と、角度スコープの作成が追加されることです。

利点は、コンテンツがコントローラーで整理されているため、コンテンツのレンダリングが簡単になる場合があることです。

于 2012-12-30T13:57:41.920 に答える
0

すでにデータにtaffydbを使用しているため、関連性がない可能性がありますが、これを実行しようとしている他のユーザーは、ForerunnerDB（http://www.forerunnerdb.com）が高度なMongoDBのようなクエリを備えているため、使用できる可能性があります。データビューをサポートしているため、クエリでコレクションをフィルタリングし、そこからビューを生成できます。

ビューには、基になるコレクションからの最新のフィルター処理されたデータが含まれ、コレクションのデータが変更されると、ビューも自動的に更新されます。

于 2015-02-05T13:06:19.073 に答える