AngularJS birden çok sütunda dinamik olarak bölme işlemi nasıl yapılır

Question

3 farklı sütuna eşit olarak dağıtılmasını istediğim bir dizi li ürünüm var. Yani liste öğelerinin 1 üçte vb 2 ul

Sağ yaklaşımım biliyorum içinde, bir sonraki üçüncü birinci ul gösterilmek üzere, bir şekilde statik olduğunu gerekir:

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

Ben 3 oluşturmak şablonumdaki satırları ve daha sonra listeyi kesen özel bir filtre oluşturdum böylece ilk 11 öğeyi, sonraki 11 öğeyi ve benzerlerini elde edebilirim. Sorun her ul satır sayısı şöyle dinamik olarak atanan olmamasıdır: Yani

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

ben elle satır sayısını değiştirmek zorunda kalacak daha unsurları varsa. Filtreleme de bir konudur. İlk sütunda 5, ikinci sütunda bir tane ile bir kelime aradığımı düşünün. Sonra tamamen düzensiz sütun boyutları olurdu. Listeyi filtrelediğimde uzunluk dinamik olarak yeniden hesaplanmalıdır.

İdeal olarak, yalnızca bir sütundaki satır sayısı dinamik olarak değil, aynı zamanda sütun sayısı da hesaplanır. Yani eğer 15'den fazla eleman varsa, üç sütun oluşturmalıdır, ancak sadece 10 eleman varsa 2 sütun daha iyi görünecektir (her birinde sadece 5 eleman olduğu için). Ve eğer 5'ten az eleman varsa sadece bir sütun oluşturulacaktır.

Resimde çözmeyi denemeliyim ya da zaten yazdığım özel filtre işlevine benzer bir çeşit yardımcı işlev yapıyorum. Ama bunu nasıl yapabilirim?

Answer 1

Her sütun için başlangıç ​​ve bitiş değerlerine sahip bir sütun dizisi oluşturun ve tüm veriler arasında geçiş yapmak ve düzgün bir şekilde oluşturmak için yuvalanmış bir tekrarlayıcı kullanın. Burada

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

Tam plnkr: kod iyileştirme hakkında http://plnkr.co/edit/AMWLvB045UJmNamp8vdz?p=preview