Cách tiếp cận đáng tin cậy và đúng kỹ thuật nhất là chuyển đổi dữ liệu trong bộ điều khiển. Đây là một chức năng chunk đơn giản và cách sử dụng.
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);
Sau đó, quan điểm của bạn sẽ như thế này:
<div class="row" ng-repeat="rows in chunkedData">
<div class="span4" ng-repeat="item in rows">{{item}}</div>
</div>
Nếu bạn có bất kỳ đầu vào nào trong ng-repeat, bạn có thể muốn hủy kết nối / nối lại các mảng khi dữ liệu được sửa đổi hoặc khi gửi. Đây là cách nó sẽ trông như thế nào $watchđể dữ liệu luôn có sẵn ở định dạng gốc, được hợp nhất:
$scope.$watch('chunkedData', function(val) {
$scope.data = [].concat.apply([], val);
}, true); // deep watch
Nhiều người thích thực hiện điều này trong chế độ xem với bộ lọc. Điều này là có thể, nhưng chỉ nên được sử dụng cho mục đích hiển thị! Nếu bạn thêm đầu vào trong chế độ xem được lọc này, nó sẽ gây ra các vấn đề có thể được giải quyết, nhưng không đẹp hoặc đáng tin cậy .
Vấn đề với bộ lọc này là nó trả về các mảng lồng nhau mới mỗi lần. Angular đang xem giá trị trả về từ bộ lọc. Lần đầu tiên bộ lọc chạy, Angular biết giá trị, sau đó chạy lại để đảm bảo nó được thay đổi. Nếu cả hai giá trị là như nhau, chu kỳ kết thúc. Nếu không, bộ lọc sẽ kích hoạt lặp đi lặp lại cho đến khi chúng giống nhau hoặc Angular nhận ra một vòng lặp tiêu hóa vô hạn đang xảy ra và tắt. Bởi vì các mảng / đối tượng lồng nhau mới không được Angular theo dõi trước đó, nó luôn thấy giá trị trả về khác với trước đó. Để sửa các bộ lọc "không ổn định" này, bạn phải bọc bộ lọc trong một memoizechức năng. lodashcó một memoizechức năng và phiên bản mới nhất của lodash cũng bao gồm một mô-đun và biên dịch tập lệnh với hoặc .chunk chức năng, vì vậy chúng tôi có thể tạo bộ lọc này rất đơn giản bằng cách sử dụngnpmbrowserifywebpack
Ghi nhớ: chỉ hiển thị! Lọc trong bộ điều khiển nếu bạn đang sử dụng đầu vào!
Cài đặt lodash:
npm install lodash-node
Tạo bộ lọc:
var chunk = require('lodash-node/modern/array/chunk');
var memoize = require('lodash-node/modern/function/memoize');
angular.module('myModule', [])
.filter('chunk', function() {
return memoize(chunk);
});
Và đây là một mẫu với bộ lọc này:
<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>
Đặt hàng theo chiều dọc
1 4
2 5
3 6
Về các cột dọc (danh sách từ trên xuống dưới) thay vì ngang (trái sang phải), việc thực hiện chính xác phụ thuộc vào ngữ nghĩa mong muốn. Danh sách phân chia không đồng đều có thể được phân phối theo nhiều cách khác nhau. Đây là một cách:
<div ng-repeat="row in columns">
<div class="column" ng-repeat="item in row">
{{item}}
</div>
</div>
var data = ['a','b','c','d','e','f','g'];
$scope.columns = columnize(data, 3);
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;
}
Tuy nhiên, cách trực tiếp và đơn giản nhất để lấy các cột là sử dụng các cột CSS :
.columns {
columns: 3;
}
<div class="columns">
<div ng-repeat="item in ['a','b','c','d','e','f','g']">
{{item}}
</div>
</div>
