分组集合中的AngualJS NG重复?AngualJS、NG

2023-09-13 02:37:15 作者:听风讲过去

我有一个pretty简单之情况,其中记录的集合可用,我需要在一个简单的NG-重复显示它们。不过,我需要通过一个属性分组的记录,我的目标是不是没有改变的收集,才能有这种分组完成。我的想法是,某些类型的过滤器可以应用,但在实践中的过滤器,以及过滤器,数据和不分组。有没有办法有一个收集和简单组和重复?

真正破解杂交的jsfiddle在这里与我想要做的。

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

在短期的思路是沿着线:

 < UL>      <李NG重复=登录由log.dept分组的日志>        < H4> {{log.dept}}< / H4>        {{log.name}}工作{{log.hours}}本周      < /李>  < / UL> 
全球20个最佳大数据可视化工具,高级PPTers的法宝

更新:那么,到底我们已经使用taffyDB对房屋的原始数据集,从而使刚刚扩大。

  $。每个($ scope.logs,函数(){        变种数= $(本)[0];        //建立棱角友好的数据结构        log.workLogsDB =太妃糖(log.worklogs);        log.deptLogs = [];        $。每个(log.workLogsDB()。不同的('部')。排序()函数(){            变种部门= $(本)[0]的ToString();            VAR成本= log.workLogsDB({部门:部门})和('成本');            VAR小时= log.workLogsDB({部门:部门})和('小时');。            。VAR项目= log.workLogsDB({部门:部门})获得();            log.deptLogs.push({                部门:部门,                TOTAL_COST:成本,                total_hours:小时,                line_items:项目            });        });    }); 

和HTML渲染:

 < D​​IV NG重复=登录日志>                < H3的onclick =$('#{{log.project}}')了slideDown()。>                    {{log.project}}时间:{{log.hours}}费用:$ {{log.cost}}                < / H3 GT&;                < UL ID ={{log.project}}的风格=显示:无;>                    < D​​IV NG重复=登录log.deptLogs>                        <跨度风格=字体重量:大胆;文本转换:大写;> {{log.department}}  - 团队费用:$ {{log.total_cost}},团队时间:{{} log.total_hours }< / SPAN>                        <李NG重复=,在log.line_items行>                            {{line.employee}} {{line.hours}}小时                        < /李>                        < BR>                    < / DIV>                < / UL>            < / DIV> 

解决方案

我认为你需要创建集合的排序副本,则NG-不断重复的有序集合。这里是小提琴我写了前一阵子,当别人问过类似的问题。要点:

 函数MyCtrl($范围,orderByFilter){//注入orderByFilter   $ scope.sortedLogs = orderByFilter($ scope.logs,+部门');} 

HTML

 < UL>  <李NG重复=登录sortedLogs>      <有关= NG-开关!$第一|| log.dept = sortedLogs [$指数1] .dept>          < D​​IV NG-开关时=真正的类=组>< H4> {{log.dept}}< / H4>      < / NG开关>      {{log.name}}工作{{log.hours}}本周  < /李>< / UL> 

I have a pretty simple scenerio where a collection of records is available and I need to display them in a simple ng-repeat. However I need the records grouped by a property, and my goal is not not have to alter the collection in order to have this grouping done. My thought is that some type of filter could be applied, but in practice filters, well filter, data and don't group. Is there a way to have a collection and simply group and repeat?

really hack-ish jsFiddle is here with what I'm trying to do.

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

in short the idea is along the lines of:

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

Update: So in the end we were already using taffyDB for housing the original dataset, so that was just expanded.

$.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
            });
        });
    });

and the HTML to render:

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

解决方案

I think you'll need to create a sorted copy of the collection, then ng-repeat over that sorted collection. Here is a fiddle I wrote a while ago when someone else asked a similar question. Salient points:

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>