AngularJS ng-repeat rows/ul答案

【问题标题】：AngularJS ng-repeat rows/ulAngularJS ng-repeat rows/ul
【发布时间】：2015-07-04 13:25:30
【问题描述】：

我有一个包含各种对象的 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>

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

谢谢！

【问题讨论】：

您可以使用 lodash 库将您的主 json 数组分块为 4 组。然后您有两个 ng-repeats 来显示您想要的结果
使用 css，每个宽度的 25%。

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

您可以使用过滤器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

【讨论】：

在这种情况下不是。例如，如果我的数组中有 80 个项目，我想显示 20 个 UL，每个 UL 中有 4 个 LI。
已更新解决方案

【解决方案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>

【讨论】：

【解决方案3】：

没有测试但试一试：

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

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

【讨论】：

【解决方案4】：

基本思想是将你的数组分块为多维数组，然后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 库。

【讨论】：

完美！奇迹般有效。谢谢！ :)
绝对是我的荣幸 :)