Angularjs对记录中字段的数据进行分组

Question

是否有类似于角度的东西可以转换这种在group_header下分组的json数据.

外部列表按组排序数据,然后是该组的内部列表数据项,如果可以对这些数据进行分组,我无法理解这一点？

var data = [  
   {  
      "id":23,
      "name":"Fun Run (Pre-Registration Required)",
      "date":"Wednesday Nov 12",
      "group_header":"Sessions from 7:00 am to 1:45 pm"
   },
   {  
      "id":24,
      "name":"Breakfast",
      "date":"Wednesday Nov 12",
      "group_header":"Sessions from 7:00 am to 1:45 pm"
   },
   {  
      "id":25,
      "name":"Opening Address",
      "date":"Wednesday Nov 12",
      "group_header":"Sessions from 7:00 am to 1:45 pm"
   },
   {  
      "id":25,
      "name":"abc",
      "date":"Wednesday Nov 12",
      "group_header":"Sessions from 1:00 pm to 9:00 pm"
   },
   {  
      "id":26,
      "name":"xyz",
      "date":"Wednesday Nov 12",
      "group_header":"Sessions from 1:00 pm to 9:00 pm"
   },
    {  
      "id":26,
      "name":"xyz",
      "date":"Wednesday Nov 12",
      "group_header":"Sessions from 8:45 am to 2:00 pm" //notice a different header
   },
  {  
      "id":26,
      "name":"xyz",
      "date":"Wednesday Nov 12",
      "group_header":"Sessions from 1:30 pm to 11:00 pm" //another different header
   }
]

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul>
    <li>Sessions from 7:00 am to 1:45 pm
        <ul>
            <li>Fun Run (Pre-Registration Required)</li>
            <li>Breakfast</li>
            <li>Opening Address</li>
        </ul>
    </li>
    <li>Sessions from 1:00 pm to 9:00 pm
        <ul>
            <li>abc</li>
            <li>xyz Address</li>
        </ul>
    </li>
    <li>another custom header (no pattern to it) - sessions from 10 am to 5 pm 
        <ul>
            <li>abc</li>
            <li>xyz Address</li>
        </ul>
    </li>
</ul>

Answer 1

如果要创建更复杂的过滤,现在最后会编写自定义过滤器选项.

第一次编辑:使用角度过滤 器GitHub的角度过滤器

将JSBIN作为您的请求工作 我正在使用angular-filter,group-by选项,这允许我这样做.你可以按照html女巫相当简单的理解

HTML:

<ul ng-repeat="(key, value) in data | groupBy: 'group_header'"> //First extracting key value, from ng-repeat and grouping it by group_header ( External 3rd party filter by angular-filter).

  Group name: {{ key }}
  <li ng-repeat="item in value"> // Then extra ng-repeat to iterate each of the objects and presenting the name .
    Activity : {{ item.name }} 
  </li>
</ul>

JS:你所要做的就是:

像这样为代码注入角度过滤器:

angular.module('app',['angular.filter'])..

所以我为你的目的编写了一个过滤器,它应该是量身定制的,但它也可以重复使用,也很容易测试.

在你进入COPY&PASTE之前:

了解使用过滤器的原因以及如何使用过滤器非常重要.

在我的解决方案中,我编写了一个过滤器,您可以声明一个minHour,它只会显示晚于该小时的小时数.

我们来看看代码:

app.filter('minHour',function(){ // 1 - Explained below.
  return function(items, minHour){ //2 - Explained below.
    var filtered = [];
    for(var i =0 ; i < items.length ; i ++){
        var hour = parseInt(items[i].start.slice(0,2)); //3 - Explained below.
        if(hour === minHour || hour > minHour){
          filtered.push(items[i]);
        }
    }
    return filtered;
  }
})

我发现上面的大部分代码都很容易阅读,但我正在写关于difficault位的解释:

1)这是角度定义新过滤器的方式.

2)过滤器将始终返回带参数的函数,第一个参数始终是ng-repeat的项,第二个参数始终是调用过滤器时将使用的字符串.(这是最重要的事情).

3)这是工作但是警告这是一个不好的做法我假设功能太多了!

*我假设小时将写在字符串的前两个字母中.

*我假设小时将始终在"开始"属性,而不首先检查属性.

*我以为我可以比较这些值.

所以经验教训:

在编写过滤器之前,请确保您没有做太多假设.

始终在测试数据的诚实度!

用法+ Plunker:

<ul>
  <li ng-repeat="items in data | minHour:09">{{items.start}}</li>
</ul>

Plunker

我没有写最大小时过滤器,因为我真的希望你练习它.如果你读完我的答案,这真的很容易.

如果您有更多问题,我乐意为您提供帮助!