1

Bootstrap 流動グリッドに表示したいビデオ サムネイルのページ付けされたリストがあります。ネストされた ng-repeat を使用して、ページネーションのために最初に各リストを反復処理し、内部の ng-repeat を使用してサブ配列内の各ビデオ サムネイルを反復処理しています。グリッドは 3x6 であるため、内側の ng-repeat のインデックスが 5 の倍数である場合 ($index が 0 から始まると仮定)、流動的な行を閉じて新しい行を開始したいと考えています。

<div ng-repeat="thumbList in thumbLists">
    <div ng-repeat="thumb in thumbList" class="row-fluid">
        <div class="span2">
            <a href="{{ thumb.URL }}">
                <img src="{{ thumb.thumbnailURL }}" width="160" height="85" alt="" class="img-responsive">
            </a>
        </div>
        <!-- ng-switch? -->
    </div>
</div>

ユーザーが「次へ」ボタンをクリックすると、新しい配列リストが「リスト」にプッシュされ、アニメーションが各 3x6 グリッド上をスライドするように、リストは REST サービスによって取り込まれます。構造は次のようになります。

$scope.thumbLists = [
    [{URL: url, thumbnailURL: thumburl}, ...],  // init
    [{URL: url, thumbnailURL: thumburl}, ...],  // pushed when user clicks 'next'
    ... etc
];

私が持っているものはすべて正常に動作しています.HTMLに条件付きで追加して行を閉じ、その行が6に達したら新しい行を開始する方法がわかりません.サムネイルは単一の配列で与えられます.

たとえば、コメント付きの ng-switch がある場合、次のようなことができますか。

<div ng-switch="$index">
    <div ng-switch-when="$index % 6 == 5">
</div>

1.0.8 安定版リリースを使用。IE8 をサポートする必要があります。

一時的な解決策 - 行の最初にある各要素の左マージンを削除します。

<div ng-repeat="thumbList in thumbLists">
    <div class="row-fluid>
        <div ng-repeat="thumb in thumbList" class="span2" ng-class="{nomargin: $index % 6 == 0}">            
            <a href="{{ thumb.URL }}">
                <img src="{{ thumb.thumbnailURL }}" width="160" height="85" alt="" class="img-responsive">
            </a>
        </div>
    </div>
</div>

おそらくディレクティブを使用して、条件付きでHTMLを挿入/削除できるソリューションを見つけたいと思います。

4

2 に答える 2

0

ng-grid は役に立ちますか? 詳細に対処する必要がなくなる場合があります。

http://angular-ui.github.io/ng-grid/

于 2013-10-10T21:17:54.143 に答える
0

これは動作しng-switchますが、余分な隠しスパンマークアップを避けるために、さらに調整が必要になる場合があります...

      <div ng-repeat="thumb in thumbList">
          <span ng-switch="$index % 5">
            <div class="row" ng-switch-when="0">
              <div class="col-sm-2"><img src="{{thumbList[$index+0].url}}" class="img-responsive"></div>
              <div class="col-sm-2"><img src="{{thumbList[$index+1].url}}" class="img-responsive"></div>
              <div class="col-sm-2"><img src="{{thumbList[$index+2].url}}" class="img-responsive"></div>
              <div class="col-sm-2"><img src="{{thumbList[$index+1].url}}" class="img-responsive"></div>
              <div class="col-sm-2"><img src="{{thumbList[$index+2].url}}" class="img-responsive"></div>
            </div>
          </span>
      </div>

http://bootply.com/86985

于 2013-10-10T23:52:17.710 に答える