AngularJS cách tự động chia danh sách thành nhiều cột

Question

Tôi có một số mục li mà tôi muốn phân phối đồng đều trên 3 cột khác nhau. Vì vậy, tôi cần ba ngày 1 danh sách các mục được hiển thị trong ul đầu tiên, thứ ba tiếp theo trong ul 2, vv

phải biết cách tiếp cận của tôi có phần tĩnh:

<ul class="small-12 medium-4 columns"> 
    <li ng-repeat="skill in skills.development | slice:0:10"> 
    {{ skill.name }} 
    </li> 
</ul> 
<ul class="small-12 medium-4 columns"> 
    <li ng-repeat="skill in skills.development | slice:10:21"> 
    {{ skill.name }} 
    </li> 
</ul> 
<ul class="small-12 medium-4 columns"> 
    <li ng-repeat="skill in skills.development | slice:21:32"> 
    {{ skill.name }} 
    </li> 
</ul> 

tôi tạo 3 các hàng trong mẫu của tôi và sau đó tôi đã tạo một bộ lọc tùy chỉnh để cắt danh sách để tôi có thể có được 11 phần tử đầu tiên, 11 phần tử tiếp theo và v.v. Vấn đề là số hàng trong mỗi ul không được gán động như sau:

Math.ceil(skills.development.length/3) 

Vì vậy, nếu tôi có nhiều phần tử, tôi sẽ phải thay đổi số hàng theo cách thủ công. Lọc cũng là một vấn đề. Hãy tưởng tượng rằng tôi tìm kiếm một từ với 5 kết quả phù hợp trong cột đầu tiên và một trong cột thứ hai. Sau đó, tôi sẽ có kích thước cột hoàn toàn không đồng đều. Độ dài cần được tính toán lại động khi tôi lọc danh sách.

Lý tưởng không chỉ số hàng trong cột được tính động mà còn số lượng cột. Vì vậy, nếu có nhiều hơn 15 yếu tố nói nó sẽ hiển thị ba cột, nhưng nếu chỉ có 10 phần tử, 2 cột sẽ trông đẹp hơn (vì chỉ có 5 phần tử trong mỗi cột). Và nếu có ít hơn 5 phần tử thì chỉ một cột sẽ được hiển thị.

Tôi thấy rằng tôi nên cố giải quyết nó trong chế độ xem hoặc thực hiện một số chức năng trợ giúp tương tự như chức năng lọc tùy chỉnh mà tôi đã viết. Nhưng làm thế nào tôi có thể làm điều đó?

Answer 1

Tạo một mảng cột có giá trị bắt đầu và kết thúc cho mỗi cột và sử dụng bộ lặp lồng nhau để lặp qua tất cả dữ liệu và hiển thị chính xác.

<ul ng-repeat="column in columns" class="small-12 medium-4 columns"> 
    <li ng-repeat="skill in skills | slice:column.start:column.end"> 
    {{ skill }} 
    </li> 
</ul> 

Full plnkr đây: http://plnkr.co/edit/AMWLvB045UJmNamp8vdz?p=preview