0

我有来自服务器的这个 JSON 模型：

[
{
  id:"open",
  title: "Opened",
  items: [
    { id:"id-1", img: "img/c/1.jpg", title: "Title 1" },
    { id:"id-2", img: "img/c/2.jpg", title: "Title 2" }
  ]
},
{
  id:"closed",
  title: "Closed",
  items: [
    { id:"id-5", img: "img/c/5.jpg", title: "Title 5" },
    { id:"id-6", img: "img/c/6.jpg", title: "Title 6" }
  ]
},
{
  id:"other",
  title: "Other",
  items: [] //empty
}
]

如何使用 AngularJS 获得此视图？

<section>
  <div class="group">
    Opened
  </div>

  <div class="item">
    <div class="img" style="background-image: url(img/c/1.jpg)"></div>
    <div class="store-item-info">Title 1</div>
  </div>

  <div class="item">
    <div class="img" style="background-image: url(img/c/2.jpg)"></div>
    <div class="store-item-info">Title 2</div>
  </div>

  <div class="group">
    Closed
  </div>

  <div class="item">
    <div class="img" style="background-image: url(img/c/5.jpg)"></div>
    <div class="store-item-info">Title 5</div>
  </div>

  <div class="item">
    <div class="img" style="background-image: url(img/c/6.jpg)"></div>
    <div class="store-item-info">Title 6</div>
  </div>
</section>

ngRepeat 还是别的什么？使用普通数组我没有问题，但这是一个复杂的模型（带有子项的数组），我想将它显示为没有嵌套的普通列表。

4

1 回答 1

2

你可以嵌套ngRepeat指令！我认为您无法准确得出您提供的标记，但这应该很接近：

<div data-ng-repeat="group in groups">
    <div class="group">
        {{ group.title }}
    </div>
    <div class="item" data-ng-repeat="item in group.items">
        ... {{ item.title }} and so on.
    </div>
</div>
于 2013-08-11T11:22:45.963 回答