Question

我有来自服务器的这个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还是其他什么？使用普通数组我没有问题，但这是复杂的模型（带有子项的数组），我想把它显示为没有嵌套的普通列表。

Answer 1

您可以嵌套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>

ngRepeat和复杂列表

1 个答案: