」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何將 AngularJS ng-repeat 資料對齊到三個 Bootstrap 欄位?

如何將 AngularJS ng-repeat 資料對齊到三個 Bootstrap 欄位?

發佈於2024-11-08
瀏覽:542

How can I align AngularJS ng-repeat data into three Bootstrap columns?

在三個引導列中對齊 AngularJS ng-repeat 資料

AngularJS 提供 ng-repeat 來基於資料數組動態創建元素。當您處理大量元素時,將它們對齊到列中可以增強使用者介面和可讀性。

基於控制器的轉換

首選方法是在控制器使用JavaScript 的chunk 函數,將資料分成大小均勻的群組:

function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i

轉換後的chunkedData 可以在視圖中呈現如下:

{{item}}

在視圖中進行過濾(警告)

雖然可以,但不建議出於資料綁定目的使用過濾器對視圖中的資料進行分塊。如果在篩選視圖中使用輸入,可能會導致不一致。

<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>

垂直列

要垂直而不是水平對齊項目,可以使用分塊方法的變體:

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;
}
<div ng-repeat="row in columns">
  <div class="column" ng-repeat="item in row">
    {{item}}
  </div>
</div>

CSS 列

創建垂直列的另一個選項是利用 CSS 列:

.columns {
  columns: 3;
}
<div class="columns">
  <div ng-repeat="item in ['a','b','c','d','e','f','g']">
    {{item}}
  </div>
</div>
最新教學 更多>
  • JavaScript 中的陣列:您需要了解的一切
    JavaScript 中的陣列:您需要了解的一切
    JavaScript 中的数组 JavaScript 中的数组最初可能会令人困惑且难以掌握,尤其是在处理高级概念时。我一开始也很难理解 JavaScript 中的数组。在本文中,我的目标是揭开 JavaScript 中数组的神秘面纱,分解您需要了解的所有内容,以便您可以自信地使用它...
    程式設計 發佈於2024-11-08
  • 使用序列與字串時如何解決 SQLite 中的參數替換問題?
    使用序列與字串時如何解決 SQLite 中的參數替換問題?
    對 SQLite 中的參數替換問題進行故障排除在 Python 中使用 SQLite3 中的參數替換時遇到問題嗎?這裡有一個深入的調查和解決方案。 為了防止SQL注入,使用'?'進行參數替換是可取的。然而,使用這種方法時可能會出現錯誤。例如,使用以下程式碼:for item in s...
    程式設計 發佈於2024-11-08
  • 如何在 Golang 中處理貨幣格式?
    如何在 Golang 中處理貨幣格式?
    Golang 中正確的貨幣格式使用貨幣格式時,必須考慮每種貨幣和語言組合的具體要求。使用 golang.org/x/text/currency,您可以根據本機約定輕鬆格式化值。但是,您在獲得所需的輸出時可能會遇到一些挑戰。 使用貨幣符號在您的代碼中,您使用currency.Symbol 來檢索貨幣符...
    程式設計 發佈於2024-11-08
  • 為什麼在 CSS 類別名稱中使用反斜杠,如 \".container.\\31 25\\25\"?
    為什麼在 CSS 類別名稱中使用反斜杠,如 \".container.\\31 25\\25\"?
    CSS的「.container.\31 25\25」中反斜線字元的用途是什麼? 在提供的CSS代碼中,反斜線字元 () 具有與識別符轉義相關的特定目的。根據CSS規範:轉義特殊字元: 反斜線可以取消CSS特殊字元的意思。在這種情況下,它可以防止百分號 (%) 被識別為 CSS 計算的開始。 數字代碼...
    程式設計 發佈於2024-11-08
  • 如何在 JavaScript 中將多個數字組合併為一個?
    如何在 JavaScript 中將多個數字組合併為一個?
    將陣列項目連接成單一陣列在JavaScript 中,將多個陣列的元素組合成一個新陣列可能是一種常見的需求。實現此目的的一種方法是使用循環迭代每個來源數組並將項目推入目標數組。然而,這種方法可能乏味且效率低。 利用「concat」函數幸運的是,JavaScript 提供了一個更簡單、更優雅的解決方案:...
    程式設計 發佈於2024-11-08
  • ## 為什麼我不能在 Go 中只複製帶有指標接收器的類型實例?
    ## 為什麼我不能在 Go 中只複製帶有指標接收器的類型實例?
    了解指標接收器和複製實例在 Go 中,可以使用值接收器或指標接收器來定義方法。當類型 T 的所有方法都有 T 本身的接收者類型時,複製該類型的實例是安全的,因為呼叫其任何方法都必然會進行複製。 然而,當類型有帶有指標接收器的方法。在這種情況下,應避免複製該類型的實例,因為它可能違反內部不變量。 複製...
    程式設計 發佈於2024-11-08
  • Java 中的建構函式重載
    Java 中的建構函式重載
    建構子在初始化類別中扮演至關重要的角色。但您是否知道在 Java 中,一個類別可以有多個建構函式?這個概念稱為建構函數重載,該功能可讓您根據提供的參數以不同的方式建立物件。在本文中,我們將深入探討建構函式重載,探討其好處,並查看實際範例。 什麼是構造函數重載? 建構子重載在Java...
    程式設計 發佈於2024-11-08
  • 如何使用 Python 函式庫維護 JSON 物件中鍵的順序?
    如何使用 Python 函式庫維護 JSON 物件中鍵的順序?
    使用Python 庫保留JSON 物件屬性的順序使用json.dumps 將Python 物件轉換為JSON 字串時,輸出JSON 物件中鍵的順序可能與輸入Python 物件中鍵的原始順序不一致。如果需要特定的鍵順序,這可能會出現問題。 要解決此問題,您可以利用某些 Python 庫,它們提供了維護...
    程式設計 發佈於2024-11-08
  • ## 什麼是 __construct 方法以及它在 PHP 中如何運作?
    ## 什麼是 __construct 方法以及它在 PHP 中如何運作?
    理解__construct在類別定義中的作用理解__construct在類別定義中的作用在物件導向程式設計中,__construct方法在類別定義中起著至關重要的作用。它作為構造函數,負責在創建物件時初始化和設定物件的屬性。 什麼是 __construct? __construct 是 PHP5 中...
    程式設計 發佈於2024-11-08
  • 如何在 C++ 中傳遞給非主函數的陣列上使用基於範圍的 for 迴圈?
    如何在 C++ 中傳遞給非主函數的陣列上使用基於範圍的 for 迴圈?
    傳遞給非主函數的數組上基於範圍的for 循環在C 中,基於範圍的for 循環可以是用於迭代數組。但是,當數組傳遞給非主函數時,它會衰減為指針,從而失去其大小資訊。 要解決此問題並啟用基於範圍的 for 循環,數組應該被引用而不是作為指標傳遞。這保留了數組的大小資訊。以下是示範正確方法的修改範例:vo...
    程式設計 發佈於2024-11-08
  • 使用 Python 進行詞嵌入:Wordc
    使用 Python 進行詞嵌入:Wordc
    使用 Python(和 Gensim)實現 word2vec 注意:此程式碼是用Python 3.6.1(Gensim 2.3.0)編寫的 word2vec與Gensim的Python實現及應用 原文:Mikolov, T.、Chen, K.、Corrado, G. 與 Dean,...
    程式設計 發佈於2024-11-08
  • 如何解決 C# 中 MySQL UTF-8 資料的編碼問題?
    如何解決 C# 中 MySQL UTF-8 資料的編碼問題?
    MySQL 和C# 中的編碼問題在您的專案中,從以UTF 編碼的MySQL 資料庫檢索資料時遇到字元差異-8 使用ADO.Net實體框架。具體來說,像“ë”這樣的字元顯示為“à”。 可能的解決方案要修正此問題,有兩個關鍵步驟: 1。驗證資料庫排序規則確保資料庫或表格的排序規則設定為 UTF-8 排序...
    程式設計 發佈於2024-11-08
  • 適合初學者的 VueJs VueJs 部分創建、導入和使用元件
    適合初學者的 VueJs VueJs 部分創建、導入和使用元件
    創建您的第一個組件 什麼是組件? 元件是 Vue 應用程式的建構塊。每個元件都有自己的功能和視圖,元件可以在整個應用程式中重複使用。組件的一個範例是可以在不同頁面上存取的導覽列。 建立基本元件 在元件資料夾中建立一個名為 HelloWorld.vue 的新元件檔案(如果需要,您...
    程式設計 發佈於2024-11-08
  • 如何在Python中為共享模組創建命名空間包?
    如何在Python中為共享模組創建命名空間包?
    在Python 中創建命名空間包以進行共享模組分發簡介在Python 中,命名空間包是分發相關模組的便捷方法。它們使多個 Python 產品能夠在同一命名空間中定義模組,從而允許最終用戶無縫導入它們。 實作命名空間包Python 3.3 中的隱式命名空間包從Python 3.3開始,引入了隱式命名空...
    程式設計 發佈於2024-11-08
  • 資料庫設計中「n:m」和「1:n」關係有什麼不同?
    資料庫設計中「n:m」和「1:n」關係有什麼不同?
    資料庫設計:闡明「n:m」與「1:n」關係的意義在資料庫設計領域,實體之間的關係是根本性的。理解用於描述這些關係的符號對於創建健壯且高效的資料庫結構至關重要。兩個常見的符號是「n:m」和「1:n」。 n:m 關係:多對多連結An "n :m」關係表示兩個表之間的多對多關係。這意味著一個表中...
    程式設計 發佈於2024-11-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3