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 列:
.columns {
columns: 3;
}
<div class="columns">
<div ng-repeat="item in ['a','b','c','d','e','f','g']">
{{item}}
</div>
</div>
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3