带有 ng-repeat 的数组数组答案

【问题标题】：Array of Arrays with ng-repeat带有 ng-repeat 的数组数组
【发布时间】：2014-07-11 04:46:31
【问题描述】：

我正在尝试显示按日期分组的列表，但该列表未排序，我不知道日期何时更改。就像我有这个 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]); 
}

但我没有成功展示这一点。

【问题讨论】：

我将重新排列 list 数组，以便日期字段是唯一的，而 name 是一个数组。那么你只需要两个 ng-repeats，第一个是 list 数组，例如 (key, value)，第二个是 value.name

标签： javascript arrays angularjs angularjs-ng-repeat

【解决方案1】：

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

【讨论】：

【解决方案2】：

我实现了一个工作示例。不是很复杂并且可以改进，但是您可以通过查看代码来了解基本概念。诀窍是对您的数据进行分组（没有花哨的角度功能，只是普通的旧 javascript），然后在视图中显示分组的数据。我必须为grouped 对象维护一个keys 属性，因为显然angularjs 视图不支持Object.keys(obj)。

看here

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

【讨论】：

【解决方案3】：

查看post，它准确地提到了您想要实现的目标。

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

或

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

【讨论】：