Javascript Angularjs将记录中的字段中的数据分组

angular中是否有类似group by的东西可以转换分组在group_标题下的此类json数据

“外部列表”按组对数据排序，然后按组的内部列表数据项排序，如果这些数据可以分组，我就无法理解这一点

var数据=[
{  
“id”：23，
“名称”：“趣味跑（需预先注册）”，
“日期”：“11月12日星期三”，
“组标题”：“从上午7:00到下午1:45的会话”
},
{  
“id”：24，
“姓名”：“早餐”，
“日期”：“11月12日星期三”，
“组标题”：“从上午7:00到下午1:45的会话”
},
{  
“id”：25，
“姓名”：“开业地址”，
“日期”：“11月12日星期三”，
“组标题”：“从上午7:00到下午1:45的会话”
},
{  
“id”：25，
“名称”：“abc”，
“日期”：“11月12日星期三”，
“组标题”：“从下午1:00到晚上9:00的会话”
},
{  
“id”：26，
“名称”：“xyz”，
“日期”：“11月12日星期三”，
“组标题”：“从下午1:00到晚上9:00的会话”
},
{  
“id”：26，
“名称”：“xyz”，
“日期”：“11月12日星期三”，
“组标题”：“从上午8:45到下午2:00的会话”//请注意不同的标题
},
{  
“id”：26，
“名称”：“xyz”，
“日期”：“11月12日星期三”，
“组标题”：“下午1:30至11:00的会话”//另一个不同标题
}
]

上课时间为上午7:00至下午1:45

趣味跑（需预先注册）
早餐
开幕词


下午1:00至9:00上课

abc
xyz地址


另一个自定义标题（无模式）-从上午10点到下午5点的会话

abc
xyz地址

如果您想创建更复杂的过滤，现在在末尾编写自定义过滤选项

第一次编辑： 使用角度滤波器从

我正在使用角度过滤器，按选项分组，这允许我这样做。您可以遵循html witch，它非常简单，易于理解

HTML:

---

因此，我为您编写了一个过滤器，它应该是定制的，但它也是可重用的，并且易于测试

在跳转到复制和粘贴之前：

了解为什么要使用过滤器以及如何很好地使用过滤器对您来说很重要

在我的解决方案中，我编写了一个过滤器，您可以声明一个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;
  }
})

app.filter（'minHour'，function（）{//1-解释如下。
返回函数（项目，分钟小时）{//2-解释如下。
var筛选=[]；
对于（变量i=0；i分钟小时）{
过滤。推送（项目[i]）；
}
}
返回过滤；
}
})

我发现上面的大部分代码都很容易阅读，但我正在写一些关于困难的解释：

1） 这就是angular定义新过滤器的方式

2） 过滤器将始终返回一个带参数的函数，第一个 参数是始终ng重复的项目，第二个参数 始终是调用筛选器时将使用的字符串。 （这是这里最重要的事情）

3） 这是有效的，但警告这是一种不好的做法，我想也是 功能中有很多东西

*我假设小时将以字符串的前两个字母书写

*我假设小时总是在“开始”属性上，而不首先检查属性

*我假设我可以比较这些值

因此，经验教训：

在编写筛选器之前，请确保您没有进行过 许多假设

在测试之前始终测试数据的真实性

用法+Plunker：

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

{{{items.start}

我没有编写最大小时过滤器，因为我真的想让你练习它。如果你通读我的答案，这真的很容易

---

如果你有更多的问题，我很乐意帮助你

您可以像这样使用角度过滤器：

在您的HTML头脑中：

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js">    </script>.

然后像这样利用：

<tr ng-repeat="(k,v) in data| groupBy: 'group_header'">
    <td>{{k}}</td>
    <td>
        <ul>
            <li ng-repeat="item in v">
                {{item.name}}
            </li>
        </ul>
    </td>
</tr>

{{k}


{{item.name}

您需要编写一个过滤器，这取决于您想要如何对其进行排序。好的，要缩小范围，我只需要检查两个值，从上午7:00到下午1:45的会话和从下午1:00到晚上9:00的会话，任何有帮助的事情，请不要犹豫，要尝试查看此代码的工作方式，只需将html minHour更改为您喜欢的值即可。这是纯JavaScript的内部过滤函数。事实上，我意识到，我真的不必检查不到一个小时，我需要对标题下的数据进行排序，我将删除开始和结束字段以避免json的混淆，所以它不是真正检查小时范围，它是一个自定义标题，在不同的行中变化，好的是，行是按组_头排序的，这将大大降低代码的灵活性，因为可能会有无数个唯一的会话。是的，这些头没有模式，有一天它们只能有从上午10点到下午2点的会话，所以每天都是自定义的，关键是他们都是作为一个组来的，接下来的几行组将有他们自己独特的标题，这就是为什么我在angulari说了一些类似sql group by的话，我看到了这篇文章，但我真的不明白，不知你能不能帮我一下

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js">    </script>.

angular.module('project', ['ngRoute','angular.filter']).config(fu....

<tr ng-repeat="(k,v) in data| groupBy: 'group_header'">
    <td>{{k}}</td>
    <td>
        <ul>
            <li ng-repeat="item in v">
                {{item.name}}
            </li>
        </ul>
    </td>
</tr>