angularjs – 在AngualJS ng-repeat中分组集合?
发布时间:2020-12-17 07:58:10 所属栏目:安全 来源:网络整理
导读:我有一个非常简单的场景,其中有一组记录可用,我需要在一个简单的ng-repeat中显示它们.但是我需要按属性分组的记录,我的目标不是不必更改集合以完成此分组.我的想法是可以应用某种类型的过滤器,但在实践中过滤器,过滤器,数据并不要分组.有没有办法有一个集合,
我有一个非常简单的场景,其中有一组记录可用,我需要在一个简单的ng-repeat中显示它们.但是我需要按属性分组的记录,我的目标不是不必更改集合以完成此分组.我的想法是可以应用某种类型的过滤器,但在实践中过滤器,过滤器,数据并不要分组.有没有办法有一个集合,只是分组和重复?
真正的hack-ish 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> 更新: $.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>
我认为你需要创建一个集合的排序副本,然后对该排序集合进行ng-repeat.这是我前一段时间写的
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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |