How can I pragmatically let ng-repeat add another row when the number of columns are 4?

Question

Hi I need someone to help me out, the ng-repeat is getting data from a json file , and it's shown inside a div of bootstrap row class which has inside it col-sm-3 , I need to let the ng-repeat to have each 4 "col-sm-3" inside a row , and not to render all the 8 col-sm-3 after each other inside only on row , because this result in an error in the design

var angular;

angular.module("rootCave", ['ngRoute'])

    .service('aboutService', function ($http, $q) {
        "use strict";
        var deferred = $q.defer();
        $http.get('data/data.json').then(function (rcdata) {
            deferred.resolve(rcdata);
        });
        this.getAbout = function () {
            return deferred.promise;
        };
    })

    .controller('aboutCtrl', function ($scope, aboutService) {
        var promise = aboutService.getAbout();
        promise.then(function (rcdata) {
            $scope.about = rcdata.data.about;
            $scope.products = rcdata.data.products;
            $scope.mobileProduct = rcdata.data.mobileProduct;
            $scope.clients = rcdata.data.clients;
            $scope.anytime = rcdata.data.anytime;
            $scope.lobProduct = rcdata.data.lobProduct;
            $scope.Product = rcdata.data.lobProduct.projectsdetails;
        });
    })

    .config(function ($routeProvider) {
        $routeProvider
            .when('/lob',
                {
                    controller: 'loburl',
                    templateUrl: 'line-of-business.php'
                });

    });

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row">
                <div class="col-sm-3 " data-ng-repeat="items in about">
                    <div class="about-box">
                        <img ng-src= "<?php echo $img_about; ?>{{items.icon}}"> 
                        <h3>{{items.title}}</h3>
                        <p>{{items.description}}</p>
                    </div>
                </div>
            </div>

Thank you Walker , can you provide me with more details ? – Mahmoud El Kotoury Mar 11 '16 at 15:08 — Mahmoud El Kotoury, Mar 11 '16 at 15:08

score 0 · Answer 1 · answered Mar 11 '16 at 15:12

You can try it may help you

<div class="row" ng-repeat="items in about track by $index" ng-if="$index % 4 == 0">
  <div class="col-sm-3" 
       ng-repeat="i in [$index, $index + 1, $index + 2, $index + 3]" 
       ng-if="about[i]"
      >
      <div class="about-box">
           <img ng-src= "<?php echo $img_about; ?>{{about[i].icon}}"> 
           <h3>{{about[i].title}}</h3>
           <p>{{about[i].description}}</p>
      </div>
  </div>
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:07

Look at this plunk: https://plnkr.co/edit/r5tXZAWFxTEAKHjqyRvY?p=preview

You can nest two ng-repeats, with the outer iterating over the rows, and the inner showing the elements:

<div ng-repeat="i in getRows(rowCount) track by $index" class="row">
  <b>Row {{$index}}</b>
  <div class="col-sm-3" ng-repeat="item in getRowItems($index)">
   {{item}}
  </div>
</div>

In your Controller:

$scope.items = ['a','b','c','d','e','f','g','h','i'];
//determine the number of rows
$scope.rowCount = Math.ceil($scope.items.length/4);
$scope.getRows = function(rows) {
    return new Array(rows);   
}
//the following function gives four items for one row index
$scope.getRowItems = function(row) {
  return $scope.items.slice(row*4, (row+1)*4);
}

It is similar to a pagination. The getRows function is inspired by this: Way to ng-repeat defined number of times instead of repeating over array?

walkerrandophsmith · Answer 3 · 2016-03-11T18:40:41.033

Maybe map doesn't work out quite like I hoped. However, Your rendering logic suggests you have a list of lists.

function group(array, size)  {
    var length = array.length;
    var result = Array(Math.ceil(length, size));
    var index = 0, resIndex = 0;
    while(index < length){
        result[resIndex++] = array.slice(index, (index += size));
    }
    return result;
}

Use the helper function in the controller

.controller('aboutCtrl', function ($scope, aboutService) {
        var promise = aboutService.getAbout();
        promise.then(function (rcdata) {
            $scope.about = group(rcdata.data.about, 4);
        });
    });

Then the rendering logic becomes:

<div class="row" ng-repeat="rows in about">
  <div class="col-sm-3 " ng-repeat="column in rows">
    <div class="about-box">

    </div>
  </div>
</div>

How can I pragmatically let ng-repeat add another row when the number of columns are 4?

3 Answers3