AngularJS如何在多列中動態地分割列表

我有許多需要在3個不同列上均勻分佈的li項目。所以，我需要的列表項的第一個第三在第一UL顯示，接下來的第三在第二UL等AngularJS如何在多列中動態地分割列表

權利知道我的做法是有點靜：

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

我創建3然後我創建了一個自定義過濾器，對列表進行分片，這樣我就可以獲得前11個元素，接下來的11個元素等等。問題是，行中每個UL的數量並不動態分配的，像這樣：

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

所以，如果我有多個元件我將不得不手動更改的行數。過濾也是一個問題。想象一下，我搜索一個詞，第一列有5個匹配詞，第二列有一個匹配詞。然後我會有完全不均勻的柱大小。當我過濾列表時，應該動態重新計算長度。

理想情況下，不僅一列中的行數是動態計算的，而且還是列數。所以如果不止有15個元素，它應該呈現三列，但是如果只有10個元素，2列看起來會更好（因爲每個元素只有5個元素）。如果少於5個元素，則只會顯示一列。

我想我應該試着在視圖中解決它，或者做一些類似於我已經寫過的自定義過濾器函數的幫助函數。但我該怎麼做？

來源

2014-09-03 funkylaundry

問題屬於http://codereview.stackexchange.com – 2014-09-03 23:43:47

@UmurKontacı，這是計算器合適的問題，剛纔標題並不好。 OP確定了標題。 – 2014-09-03 23:47:54

謝謝，我其實不知道代碼審查，但因爲我不只是問如何重構我的代碼，但如何通過使它動態添加功能，我只是改變了標題。 – funkylaundry 2014-09-03 23:48:14

爲每列創建一個具有開始和結束值的列數組，並使用嵌套的中繼器遍歷所有數據並正確呈現。

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

完全plnkr這裏：關於提高代碼http://plnkr.co/edit/AMWLvB045UJmNamp8vdz?p=preview

來源

2014-09-04 00:15:18

真棒解決方案！爲了適應我如何嵌套我的範圍，我不得不調整一下，但你的例子很容易遵循。另外我添加了邏輯來自動確定列數。這裏是我最終使用的實現：https：//gist.github.com/webconsult/e9afc4cd1c2d4eb4057d，你可以在http://zkwsk.com查看完成的結果，當你去體驗部分，然後按「顯示所有」。謝謝！ – funkylaundry 2014-09-04 04:01:43

@funkylaundry，很高興它的工作，並感謝您發佈了一些你調整後最終結果的要點。 – 2014-09-04 06:09:07

AngularJS如何在多列中動態地分割列表

回答

相關問題