AngularJS ng-repeat 行/无序列表

Question

AngularJS ng-repeat 行/无序列表

4

我有一个包含多个对象的JSON数组，我想使用ng-repeat在HTML中显示这些对象，方法如下：

<ul>
    <li>object 1</li>
    <li>object 2</li>
    <li>object 3</li>
    <li>object 4</li>
</ul>
<ul>
    <li>object 5</li>
    <li>object 6</li>
    <li>object 7</li>
    <li>object 8</li>
</ul>

基本上我想每行（ul）只显示4个项目，我该怎么做？

谢谢！

- Moisés Pio

你可以使用lodash库将主json数组分块为4组。然后，你需要两个ng-repeats来显示你想要的结果。 - shivas

使用 CSS，每个宽度为 25%。 - YOU

4个回答

2

尝试这个示例，在您的控制器中：

var list = {'1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'};

// Using lodash
var chunkedList = _.chunk(list, 4);

在你的HTML中：

<ul ng-repeat="items in chunkedList">
 <li ng-repeat="item in items">Object {{item}}</li>
</ul>

- shivas

1

没有测试过，但可以试一下：

<ul ng-repeat="n in getNumber(number)">
        <li ng-repeat="item in items | limitTo:4:n*4">object 1</li>
</ul>

JS

$scope.number = Math.round(items.length/4);
scope.getNumber = function(num) {
    return new Array(num);   
}

- Said Kholov

1

基本思路是将您的数组分块到多维数组中，然后使用嵌套结构两次ng-repeat进行重复。

如果您想更改块数，只需将其更改为任何您喜欢的整数即可。

Live demo在这里。

HTML

<body ng-app="myApp" ng-controller="MainCtrl as ctrl">
  <ul ng-repeat-start="chunk in ctrl.chunkList">
    <li ng-repeat="item in chunk">{{item}}</li>
  </ul>
  <hr ng-repeat-end/>
</body>

JS

angular
  .module('myApp', [])
  .controller('MainCtrl', [function() {
    var self = this;
    var listLength;
    var groupNum;
    var i;

    self.list = [
      'item1', 'item2', 'item3', 'item4', 'item5', 
      'item6', 'item7', 'item8'
    ];

    listLength = self.list.length;
    groupNum = (listLength % 4 === 0)? listLength / 4 : Math.ceil(listLength / 4);

    self.chunkList = [];
    for (i = 0; i < groupNum; i++) {
      self.chunkList[i] = self.list.slice(i * 4, (i + 1) * 4);
    }

  }]);

此外，请注意，如果循环中没有其他元素，则可以直接删除ng-repeat-start和ng-repeat-end，并直接使用ng-repeat。

<body ng-app="myApp" ng-controller="MainCtrl as ctrl">
  <ul ng-repeat="chunk in ctrl.chunkList">
    <li ng-repeat="item in chunk">{{item}}</li>
  </ul>
</body>

注释

这种方法与@Shivas Jayram的方法类似，但无需使用underscore库。

- kavare

完美！像魔法一样运行。谢谢！ :) - Moisés Pio

当然很乐意 :) - kavare

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sridhar Chidurala · Accepted Answer

您可以使用过滤器limitTo。

ng-repeat="item in items | limitTo:4"

更新：这应该可以工作。

<ul ng-repeat="item in arr" ng-if="$index%4==0">
  <li ng-repeat="item in arr|limitTo:4:$index" >
    {{item}} 
  </li>
</ul>

Plnkr