Question

我有以下数据：

var days = [
  {
    events: [
      "e1",
      "e2"
    ]
  },
  {
    events: [
      "e3",
      "e4",
      "e5"
    ]
  }
  /* ... */    
];

（真实数据有更多字段）

我需要在一个平面列表中呈现所有事件：

<ul>
  <li>e1</li>
  <li>e2</li>
  <li>e3</li>
  <!-- ... -->
</ul>

如果没有在渲染之前手动嵌套列表，有没有办法做到这一点？我尝试使用ng-repeat但不会对嵌套数组起作用，因为我无法在渲染中嵌套元素。

Answer 1

我会在控制器中处理它，如下所示：

$scope.getEvents = function () {
    var events = [];
    for (var i = 0; i < $scope.days.length; i++) {

        var currEvent = $scope.days[i];
        for (var j = 0; j < currEvent.events.length; j++) {    
            events.push(currEvent.events[j]);
        }
    }

    return events;
}

然后在HTML中这样做：

<div ng-app="" ng-controller="MyCtrl">
  <ul>
      <li ng-repeat="event in getEvents()">{{event}}</li>  
  </ul>
</div>

Fiddle

Answer 2

这就是我要做的事情：

<ul>
  <dummy ng-repeat="day in days">
     <li ng-repeat="event in day.events">{{event}}</li>
  <dummy>
</ul>

浏览器会忽略虚拟标记，因为它是自定义的，只显示li标记。

这不是完美的方式，但它会对你有用

如何使用嵌套数组在Angular中呈现平面列表？

2 个答案: