admin管理员组

文章数量:1415139

I have a JSON array with various objects and I want to show these objects in the HTML using ng-repeat, but as follows:

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

Basically I want to show only 4 items per row (ul) How can I do that?

Thanks!

I have a JSON array with various objects and I want to show these objects in the HTML using ng-repeat, but as follows:

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

Basically I want to show only 4 items per row (ul) How can I do that?

Thanks!

  • javascript
  • angularjs
  • angularjs-ng-repeat
Share Improve this question asked Apr 26, 2015 at 2:15 Moisés PioMoisés Pio 4231 gold badge5 silver badges11 bronze badges 2
  • You can use lodash library to chunk your main json array to group of 4. Then you have two ng-repeats to display the results like you want – shivas Commented Apr 26, 2015 at 2:27
  • using css, 25% of width each. – YOU Commented Apr 26, 2015 at 5:53
Add a ment  | 

4 Answers 4

Reset to default 4

You can use the filter limitTo

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

UPDATE:This should work

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

Plnkr

Try this sample out, In your controller:

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

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

In your HTML:

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

Didn't test but give it a try:

<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);   
}

The basic idea is to chunk your array to multidimensional array, and then ng-repeat it twice with nested structure.

If you would like to change the chunk number, you may just change it to any integers you like.

Live demo is here.

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);
    }

  }]);

Also notice that if you there's no need for other elements in the loop, you can just remove ng-repeat-start and ng-repeat-end and use ng-repeat directly instead.

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

Notes

This is approach is similar to @Shivas Jayram's, but without the need for underscore library.

本文标签： javascriptAngularJS ngrepeat rowsulStack Overflow

版权声明：本文标题：javascript - AngularJS ng-repeat rowsul - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745219331a2648316.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。