Question

我正在尝试显示按日期分组的列表，但列表未排序，我不知道日期何时更改。这就像我有这个Json：

list = 
{name: first, date: 2014-05-21}, {
{name: second, date: 2014-05-20}, {
{name: third, date: 2014-05-21}

我想制作以下html：

<li><h3>2014-05-21</h3>
 <ul>
  <li>first</li>
  <li>third</li>
 </ul>
</li>
<li><h3>2014-05-20</h3>
 <ul>
 <li>second</li>
 </ul>
</li>

你有什么想法吗？

我尝试制作一个带有两个ng-repeat的数组数组，如下所示：

for (i in list){
 if ($scope.listToShow[list.date] == undefined) {
     $scope.listToShow[list.date] = newArray();
 }
 $scope.listToShow[list.date].push(list[i]); 
}

但我没有成功证明这一点。

Answer 1

检查post，它确切地提到了你想要达到的目标。

http://www.bennadel.com/blog/2456-grouping-nested-ngrepeat-lists-in-angularjs.htm

或

您也可以使用ng-repeat-start and ng-repeat-end（内置指令）来实现相同目的。 Click here用于参考链接。

Answer 2

我实现了一个有效的例子。不是很复杂，可以改进，但你通过查看代码得到了基本的想法。诀窍是对数据进行分组（没有奇特的角度特征，只是普通的旧javascript），然后在视图中显示分组数据。我不得不为keys对象保留grouped属性，因为显然angularjs视图不支持Object.keys(obj)。

见here

编辑：使用(key,obj) in grouped构造进行了更新，不再需要keys数组。

Answer 3

我在表中有一个数组数组testing。它不是最干净的。

//controller
$scope.list = [
    [
        {name: 'first', date: '2014-05-21'},
        {name: 'lala', date: '2014-07-32'},
        {name: 'fada', date: '2014-07-32'}
    ], 
    [
        {name: 'second', date: '2014-05-20'},
        {name: 'dada', date: '2014-54-32'},
        {name: 'mama', date: '2014-07-32'}
    ], 
    [
        {name: 'third', date: '2014-05-21'},
        {name: 'nana', date: '2014-78-32'},
        {name: 'rara', date: '2014-07-32'}
    ]
];

//view
<table>
    <tr class="parent" ng-repeat-start="(key, item) in list">
        <td>{{ item[0].name }}</td>
        <td>{{ item[0].date }}</td>
    </tr>
    <tr class="child" ng-repeat-end="", ng-repeat="part in list[key].slice(1, list[key].length)">
        <td>{{ part.name }}</td>
         <td>{{ part.date }}</td>
    </tr>
</table>

具有ng-repeat的阵列数组

3 个答案: