AngularJS でブートストラップを使用して ng-repeat データを列に分散するにはどうすればよいですか?
Oct 25, 2024 am 10:30 AMブートストラップを使用して ng-Repeat データを列に分散する
AngularJS では、反復データを扱うときに ng-repeat を活用することが基本です。ただし、これらの要素を 3 つの異なる列など、視覚的に魅力的なレイアウトに編成する必要が生じることがよくあります。これを達成するために、コントローラー レベルとビュー レベルの両方のソリューションを含むさまざまなアプローチを掘り下げます。
コントローラー レベルの変換
堅牢なアプローチは、コントローラー内のデータ。提供されたチャンク関数を活用することで、データを等しいサブ配列に分割し、それぞれが 1 つの列を表すことができます:
<code class="javascript">function chunk(arr, size) { var newArr = []; for (var i=0; i<arr.length; i+=size) { newArr.push(arr.slice(i, i+size)); } return newArr; } $scope.chunkedData = chunk(myData, 3);
ログイン後にコピー
このデータは、次のようにネストされた ng-repeat を使用してレンダリングできます:
<code class="html"><div class="row" ng-repeat="rows in chunkedData"> <div class="span4" ng-repeat="item in rows">{{item}}</div> </div></code>
ログイン後にコピー
ビューレベルのフィルタリング
または、フィルタを使用して、ビュー内で目的のレイアウトを実現することもできます。ただし、このアプローチは主に表示目的を目的としており、入力要素を組み込むときに問題が発生する可能性があります。
<code class="html"><pre><div ng-repeat="row in ['a','b','c','d','e','f'] | chunk:3"> <div class="column" ng-repeat="item in row"> {{($parent.$index*row.length)+$index+1}}. {{item}} </div> </div> </pre></code>
ログイン後にコピー
垂直列化
項目を水平ではなく垂直に分散するには、前述のアプローチにわずかな変更を加えることができます:
<code class="html"><div ng-repeat="row in columns"> <div class="column" ng-repeat="item in row"> {{item}} </div> </div></code>
ログイン後にコピー
<code class="javascript">var data = ['a','b','c','d','e','f','g']; $scope.columns = columnize(data, 3); function columnize(input, cols) { var arr = []; for(i = 0; i < input.length; i++) { var colIdx = i % cols; arr[colIdx] = arr[colIdx] || []; arr[colIdx].push(input[i]); } return arr; }
ログイン後にコピー
CSS 列
もう 1 つの洗練されたソリューションには、CSS 列の活用が含まれます:
<code class="css">.columns { columns: 3; }
ログイン後にコピー
<code class="html"><div class="columns"> <div ng-repeat="item in ['a','b','c','d','e','f','g']"> {{item}} </div> </div></code>
ログイン後にコピー
以上がAngularJS でブートストラップを使用して ng-repeat データを列に分散するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7134
9


Java チュートリアル
1534
14


Laravel チュートリアル
1257
25


PHP チュートリアル
1205
29


CakePHP チュートリアル
1154
46

