AngularJS と Bootstrap を使用して ng-repeat データを 3 つの列に分割するにはどうすればよいですか?

ng-repeat データを 3 つの列に分割する

AngularJS を使用すると、開発者は ng-repeat ディレクティブを使用して Web ページに動的データを表示できます。ただし、多数のデータ要素を扱う場合は、構造化されたレイアウトで要素を整理することが必要になることがよくあります。これには、データを列に分割する必要がありますが、これはさまざまなアプローチを使用して実現できます。

アライメントのためのブートストラップの組み込み

人気のあるフロントエンド フレームワークであるブートストラップは、応答性が高く一貫性のあるグリッド レイアウトを作成するためのシンプルなメカニズム。 Bootstrap をコードに組み込むことで、テキスト ボックスやその他のフォーム要素を 3 つの均等に整然と配置された列に簡単に整列させることができます。

ステップ 1: コントローラーの変換

データを列に分割する効率的かつ信頼性の高い方法は、コントローラー内でデータを操作することです。これには、チャンク関数の作成と ng-repeat ディレクティブ内での使用が含まれます:

<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 ng-repeat="rows in chunkedData">
  <div class="col-4" ng-repeat="item in rows">
    {{item}}
  </div>
</div></code>

このメソッドは、データは元の形式のままであり、変更せずに操作または送信できます。

ステップ 2: ビューベースのチャンキング

を使用してデータ分割を実行することもできます。ビュー内のフィルターを使用する場合、このアプローチは表示目的にのみ適していることに注意することが重要です。このようなフィルターされたビュー内にフォーム要素が追加されると、潜在的な問題が発生する可能性があります。インタラクティブな要素については、コントローラー内のデータを操作することをお勧めします。ただし、それでもビューベースのチャンクを使用したい場合は、安定性とパフォーマンスを向上させるために lodash のようなライブラリを利用することを検討してください。

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