angular.js - ng-repeat如何限数量输出?
phpcn_u1582
phpcn_u1582 2017-05-15 16:58:29
0
4
784

现在碰到这样一个需求:有一个数组

$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)
黄舟

リーリー


リーリー
リーリー
いいねを押す +0
某草草

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

ただし、列を取得する最も直接的で単純な方法は、CSS 列を使用することです。
はい、これに同意します
複数の列を 1 行に表示するには、CSS を使用して行うことができます。書くのがめんどくさい

いいねを押す +0
某草草

JS を使用して ITEMS を 2 次元配列に変換してみませんか?そして出力は?

いいねを押す +0
仅有的幸福

データをツリー構造に整理するだけです。 。 。

など リーリー

それから二重層リピートを使用します

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!