如何使用 AngularJS 和 Bootstrap 將 ng-repeat 資料拆分為三個欄位？

將 ng-repeat 資料分割為三列

AngularJS 允許開發人員使用 ng-repeat 指令在網頁中顯示動態資料。然而，當處理大量資料元素時，通常需要以結構化佈局來組織元素。這需要將資料拆分成列，這可以透過多種方法來實現。

結合 Bootstrap 進行對齊

Bootstrap 是一個流行的前端框架，提供了創建響應靈敏且一致的網格佈局的簡單機制。透過將 Bootstrap 合併到我們的程式碼中，我們可以輕鬆地將文字方塊或其他表單元素對齊為三個相等且整齊排列的欄位。

第 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 資料拆分為三個欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！