Question

这是我的数据结构：

headings = [
  {name:'H1', items: ['a', 'b', 'c']},
  {name:'H2', items: ['d', 'e', 'f']}
];

我希望得到这个：

<li ng-repeat="heading in headings" class="heading">{{ heading.name }}</li>
<li ng-repeat="item in heading">{{ item.name }}</li>

但在第二个ng-repeat中，heading不存在。同时，我不想将第二个li嵌套在第一个 <li class="heading">{{ heading.name }}</li> <li ng-repeat="item in heading">{{ item.name }}</li> 内。

这可以解决吗？

我正在考虑某种评论解决方案，但我想这是淘汰语法：

{{1}}

Answer 1

您可以使用ng-repeat-start和ng-repeat-end：

<li ng-repeat-start="heading in headings" class="heading">{{ heading.name }}</li>
<li ng-repeat="item in heading.items" ng-repeat-end>{{ item }}</li>

Working Fiddle

ng-repeat-start重复所有内容，直到并包含ng-repeat-end元素。

Answer 2

你可以用一个额外的元素包装lis并在该元素上加上ng-repeat。如果列表中没有其他li项，只需将ng-repeat放在列表中：

<ul ng-repeat="heading in headings">
  <li class="heading">{{ heading.name }}</li>
  <li ng-repeat="item in heading.items">{{ item }}</li>
</ul>

有关可运行的示例，请参阅此Plunker。

Answer 3

你可以压扁它们：

$scope.$watch('headings', function(headings) {
   $scope.flattened = [];
   angular.forEach(headings, function(heading) {
     angular.forEach(heading.items, function(item) {
        $scope.flattened.push({
            heading: heading,
            item: item
        });
     });
   });
});

然后在你的HTML中：

<li ng-repeat="flat in flattened">{{flat.item.name}}</li>

ng-repeat li基于嵌套数据，但没有嵌套li

3 个答案: