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 に答える