目次
ブートストラップを使用して ng-Repeat データを列に分散する
ホームページ ウェブフロントエンド jsチュートリアル AngularJS でブートストラップを使用して ng-repeat データを列に分散するにはどうすればよいですか?

AngularJS でブートストラップを使用して ng-repeat データを列に分散するにはどうすればよいですか?

Oct 25, 2024 am 10:30 AM

How to distribute ng-repeat data into columns using Bootstrap in AngularJS?

ブートストラップを使用して ng-Repeat データを列に分散する

AngularJS では、反復データを扱うときに ng-repeat を活用することが基本です。ただし、これらの要素を 3 つの異なる列など、視覚的に魅力的なレイアウトに編成する必要が生じることがよくあります。これを達成するために、コントローラー レベルとビュー レベルの両方のソリューションを含むさまざまなアプローチを掘り下げます。

コントローラー レベルの変換

堅牢なアプローチは、コントローラー内のデータ。提供されたチャンク関数を活用することで、データを等しいサブ配列に分割し、それぞれが 1 つの列を表すことができます:

<code class="javascript">function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i&lt;arr.length; i+=size) {
    newArr.push(arr.slice(i, i+size));
  }
  return newArr;
}

$scope.chunkedData = chunk(myData, 3);
ログイン後にコピー

このデータは、次のようにネストされた ng-repeat を使用してレンダリングできます:

<code class="html">&lt;div class=&quot;row&quot; ng-repeat=&quot;rows in chunkedData&quot;&gt;
  &lt;div class=&quot;span4&quot; ng-repeat=&quot;item in rows&quot;&gt;{{item}}&lt;/div&gt;
&lt;/div&gt;</code>
ログイン後にコピー

ビューレベルのフィルタリング

または、フィルタを使用して、ビュー内で目的のレイアウトを実現することもできます。ただし、このアプローチは主に表示目的を目的としており、入力要素を組み込むときに問題が発生する可能性があります。

<code class="html">&lt;pre&gt;&lt;div ng-repeat=&quot;row in ['a','b','c','d','e','f'] | chunk:3&quot;&gt;
  &lt;div class=&quot;column&quot; ng-repeat=&quot;item in row&quot;&gt;
    {{($parent.$index*row.length)+$index+1}}. {{item}}
  &lt;/div&gt;
&lt;/div&gt;
&lt;/pre&gt;</code>
ログイン後にコピー

垂直列化

項目を水平ではなく垂直に分散するには、前述のアプローチにわずかな変更を加えることができます:

<code class="html">&lt;div ng-repeat=&quot;row in columns&quot;&gt;
  &lt;div class=&quot;column&quot; ng-repeat=&quot;item in row&quot;&gt;
    {{item}}
  &lt;/div&gt;
&lt;/div&gt;</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 &lt; 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">&lt;div class=&quot;columns&quot;&gt;
  &lt;div ng-repeat=&quot;item in ['a','b','c','d','e','f','g']&quot;&gt;
    {{item}}
  &lt;/div&gt;
&lt;/div&gt;</code>
ログイン後にコピー

以上がAngularJS でブートストラップを使用して ng-repeat データを列に分散するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

See all articles