angular.js - ng-repeat如何限數量輸出?
phpcn_u1582
phpcn_u1582 2017-05-15 16:58:29
0
4
832

現在碰到這樣一個需求:有一個陣列

$scope.items = [
    {name:'a1'},{name:'a2'},{name:'a3'}....
]

現在需要它輸出

<ul>
    <li>a1</li><li>a2</li><li>a3</li><li>a4</li><li>a5</li><li>a6</li><li>a7</li><li>a8</li><li>a9</li><li>a10</li> //10个
</ul>
<ul>
    <li>a11</li><li>a12</li><li>a13</li><li>a14</li><li>a15</li><li>a16</li><li>a17</li><li>a18</li><li>a19</li><li>a20</li> //10个
</ul>
<ul>
    <li>a21</li><li>a22</li>... //10个
</ul>

我想用ng-repeat輸出,想出來的方案是,先把陣列 length 除以 10

$scope.n = Math.ceil ( items.length / 10 );

然後ng-repeat輸出 n 個 ul,再分別在ul裡 ng-repeat 10個item。

那麼問題來了,如何ng-repeat輸出n個ul?

<ul ng-repeat=" ...不会写... ">
    <li ng-repeat = " item in items | ...//如何过滤">
        {{item.name}}
    </li>
</ul>

求問各路大神!

更新问题!感谢各位同行!

首先,css已經不可動了,因為根據產品需求已經寫好了樣式,並且得到了每行需要10個li的結果。
看到@zchq88 這位朋友的提醒以後,我立刻做了一維數組轉二維數組的過濾器,像@Chobits 同學那樣的。
但是報錯。

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!


console.log() 會發現陣列被執行了N遍過濾器。
google也沒有找到原因和解決方案。
我猜是,拆數組的時候,由於指引型數據,引發了重複髒檢查。
實驗了angular.copy也失敗,現在正在尋找其他解決方案。
再次感謝!期待有同學提出其他解決方案!

解决!最后一次更新:

因為產品中items實際的結構是

$scope.group = [
    {
        key:888,
        items:[
            {name:'a1'},{name:'a2'},{name:'a3'}....,{name:'a13'}...//n多个
        ]
    },
    {
        key:999,
        items:[
            {name:'a1'},{name:'a2'},{name:'a3'}....,{name:'a33'}...//n多个
        ]
    },
    ....
]

繞開了html中加過濾器產生的重複髒檢查問題。根據@Chobits 提供的過濾器,在控制器裡對group進行了過濾

group.forEach(function(items){
    items.items  =  $filter('group')(items.items);
})

然後再ng-repeat輸出,問題解決。

<p ng-repeat = "input in group">
    <ul ng-repeat="items in input.items">
        <li ng-repeat="item in items">
            {{item.name}}
        </li>
    </ul>
</p>

prefect! thanks everyone!

phpcn_u1582
phpcn_u1582

全部回覆(4)
黄舟

雷雷


雷雷
雷雷
某草草

http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap

However, the most direct and just plainly simple way to get columns is to use CSS columns:
是的 贊同這個
排一下版 一行顯示幾個完全可以用css 方法多的都懶得寫

某草草

為什麼不直接把ITEMS用JS變成2維數組?然後輸出?

仅有的幸福

把資料整理成樹狀結構即可。 。 。
例如

scope.list = [
{name:"a",children:[
    {name:'son1 of a'},
    {name:'son2 of a'}
    ]},
{name:"b",children:[
    {name:'son1 of b'},
    {name:'son2 of b'}
    ]}
]

然後ng裡用雙層repeat

<ul ng-repeat="item in list">
    <li ng-repeat = " son in item.children">
        {{son.name}}
    </li>
</ul>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板