1

アイテムを使用ngRepeatして、一意の階層を持つセットから特定のアイテムを表示するにはどうすればよいですか?<div>

CSS フレームワーク Bootstrap 3を使用しています

セットにxアイテムがあり、最初のアイテムyは常に特定の順序で配置され、残りのアイテムは通常の構造(x-y)にフォールバックしているとします。<div>以下に、潜在的な結果の例をいくつか示します。

例 1

<!-- Unique -->
<div class="row">
  <div class="col col-lg-6">Item Text 0</div>
  <div class="col col-lg-6">
    <div class="row">
      <div class="col col-lg-3">Item Text 1</div>
      <div class="col col-lg-3">Item Text 2</div>
      <div class="col col-lg-3">Item Text 3</div>
      <div class="col col-lg-3">Item Text 4</div>
    </div>
  </div>
</div>
<!-- Remainder -->
<div class="row">
  <div class="col col-lg-12">
    <ul>
      <li>Item Text 5</li>
      <li>Item Text 6</li>
      <li>Item Text 7</li>
      <li>Item Text 8</li>
    </ul>
  </div>
</div>

例 2

<!-- Unique -->
<div class="row">
  <div class="col col-lg-8">Item Text 0</div>
  <div class="col col-lg-4">
    <div class="row">
      <div class="col col-lg-12">Item Text 1</div>
      <div class="col col-lg-12">Item Text 2</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col col-lg-4">Item Text 3</div>
  <div class="col col-lg-4">Item Text 4</div>
  <div class="col col-lg-4">Item Text 5</div>
</div>
<!-- Remainder -->
<div class="row">
  <div class="col col-lg-12">
    <ul>
      <li>Item Text 6</li>
      <li>Item Text 7</li>
      <li>Item Text 8</li>
    </ul>
  </div>
</div>
4

2 に答える 2

0

あなた自身の投稿へのコメントに基づいて、配列があり、その配列の最初の x 要素を特定の形式で表示し、残りの要素を別の形式で表示しng-repeat、配列の要素を反復処理するために使用すると仮定します.

物件をご利用いただけ$indexます。を使用するng-repeatと、$indexプロパティは現在の反復回数を追跡します。

したがって、次のようなものを作成できます (x は配列の最初の x 要素です)。

<div ng-repeat="item in array">
    <div data-ng-show="$index < x">
        <!-- Structure to be applied to the first x elements of the array -->
    </div>
    <div data-ng-hide="$index < x">
        <!-- Structure to be applied to the remaining elements of the array -->
    </div>
</div>
于 2013-07-01T05:29:54.140 に答える
0

同様に繰り返されるサブセクションにはスライス配列を使用し、一意の要素にはインデックス番号を使用します。

上記の例に従うと、次のようになります。

例 1

<!-- Unique -->
<div class="row">
  <div class="col col-lg-6">{{items[0].text}}</div>
  <div class="col col-lg-6">
    <div class="row">
      <div class="col col-lg-3" ng-repeat="item in items | slice:1:5">{{item.text}}</div>
    </div>
  </div>
</div>
<!-- Remainder -->
<div class="row">
  <div class="col col-lg-12" ng-repeat="item in items | slice:5">
    <ul>
      <li>{{item.text}}</li>
    </ul>
  </div>
</div>

例 2

<!-- Unique -->
<div class="row">
  <div class="col col-lg-8">{{items[0].text}}</div>
  <div class="col col-lg-4">
    <div class="row">
      <div class="col col-lg-12" ng-repeat="item in items | slice:1:2>{{item.text}}</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col col-lg-4" ng-repeat="item in items | slice:3:5>{{item.text}}</div>
</div>
<!-- Remainder -->
<div class="row">
  <div class="col col-lg-12">
    <ul>
      <li ng-repeat="item in items | slice:6:8">{{item.text}}</li>
    </ul>
  </div>
</div>

Filters.js

filter('slice', function() {
  return function(arr, start, end) {
    return arr.slice(start, end);
  };
}).
于 2013-07-09T13:57:00.080 に答える