1

偶数と奇数のプロパティに基づいて配列をフィルタリングしたいの$indexですが、別の div に奇数要素を追加し、別の div に偶数要素を追加したいのですが、これは JavaScript や jQuery で簡単に実行できますが、正しい実装方法を知りたいと思っていました。 AngularJS でも同じです。

これは私がこれまでに行ったことです：

<div ng-app> 
    <div ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
        <div class="row" ng-repeat="name in names">
            <div class="col-xs-6" ng-show="(($index + 1)%2) == 0">{{name}}</div>
            <div class="col-xs-6" >{{name}}</div>
        </div>    
    </div>
</div>

最初のケースでは奇数要素の代わりに空のスペースが表示され、2 番目の div に奇数式を追加すると、2 番目の div の要素が消えて最初の div に表示されます。これは、同じ問題のフィドルです。

お知らせ下さい。

編集：

私は欲しいものを手に入れました。メイン配列を奇数配列と偶数配列の2つの異なる配列に分割しました。このフィドルは、将来同じ問題に出くわした人々に役立つかもしれません。

4

2 に答える 2

1

やり方のせいで、あなたがやろうとしていることで苦労することになると思いますng-repeat。繰り返しの反復ごとに新しいスコープを生成します。したがって、ループを通過するたびに 2 つの div が作成され、1 つが表示され、もう 1 つが非表示になります。

あなたが見ている奇妙な振る舞いを説明するには：

  • 最初のケースでは、ループは 2 つの div の表示と 1 つの div の表示を交互に繰り返します。1 つの div のみを表示する行では、2 番目の列に空白が挿入されたように見えます。

  • 2 番目のケースでは、ng-repeat ループは、最初の div と 2 番目の div を交互に表示します。違いを示す CSS スタイルがないと、1 つの div のように見えます。div の 1 つなどにスタイルを追加することで、ポップにすることができますtext-info。

舞台裏で何が起こっているかを説明してくれることを願っていますが、より良い質問は... 2 つの div で何を達成しようとしているのかということです。

更新：あなたの目標はその配列を取得して2列のレイアウトに送り出すことであるように見えるので、おそらく行divと2列のdivを廃止できます。代わりに、単一の 6 幅の列 div を繰り返してみてください。他のすべての列の行の折り返しを処理します。divを区別したい場合は、@Blackholeが指摘したように、奇数と偶数のスタイリングを使用できます。ここに、役に立つかもしれないフィドルの設定例があります。

于 2013-10-21T19:01:45.177 に答える