1

I want to print array items like

 a b c d e f
 g h i j k l
 m n o p q r

My array is ["a","b","c","d","e"...] like up to r

I tried like ths

<div ng-repeat="array in arraylist | limitTo:6">
            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" >
              <div class="form-group">
                <label>{{array}} </label>
              </div>
              </div>
            </div>

But it printing up to f, then how to print all elements in above format?

Soumya Gangamwar
  • 954
  • 4
  • 16
  • 44
  • so you want to print 6 char per row right? – Jigar7521 Dec 09 '16 at 04:41
  • 1
    You don't need to use limit here, but actually you need to keep track through index to take new div , Here it's answer http://stackoverflow.com/questions/27211799/angular-ng-repeat-add-bootstrap-row-every-3-or-4-cols – Jigar7521 Dec 09 '16 at 04:43
  • that linked question is *very similar*, with the exception of the number being repeated over. – Claies Dec 09 '16 at 05:03

5 Answers5

1

Remove the limitTo filter it just limits to number of item in an array.Now coming to your problem it can be easily solved by putting a empty div with bootstrap class col-xs-12,col-sm-12,col-lg-12 applied and this div would be shown only when $index%6 is 0.Code sample is as follows.

 <div ng-repeat="array in arraylist">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-if="($index)%6==0"></div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
            <div class="form-group">
                <label>
                    {{array}}
                </label>
            </div>
        </div>
    </div>
bhanu.cs
  • 1,345
  • 1
  • 11
  • 25
1

limitTo

Creates a new array or string containing only a specified number of elements.

But you need to iterate over the entire array. Check this fiddle:

<div ng-repeat="alphabet in alphabets" ng-if="$index % 6 == 0" class="row">
    <div class="col-xs-2">{{alphabets[$index]}}</div>
    <div class="col-xs-2">{{alphabets[$index + 1]}}</div>
    <div class="col-xs-2">{{alphabets[$index + 2]}}</div>
    <div class="col-xs-2">{{alphabets[$index + 3]}}</div>
    <div class="col-xs-2">{{alphabets[$index + 4]}}</div>
    <div class="col-xs-2">{{alphabets[$index + 5]}}</div>
</div>
Divyanshu Maithani
  • 13,908
  • 2
  • 36
  • 47
1

Try This

 var app = angular.module("app", []);

app.controller("listController", ["$scope",
  function($scope) {


    $scope.results = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r"];


  }
]);
Sa E Chowdary
  • 2,075
  • 15
  • 31
Pramod Wayal
  • 67
  • 5
0

You can do

 <div ng-repeat="product in results" ng-if="$index % 6 == 0" class="row">
      <div class="col-xs-2">{{results[$index]}}</div>
     <div class="col-xs-2">{{results[$index + 1]}}</div>
     <div class="col-xs-2">{{results[$index + 2]}}</div>
     <div class="col-xs-2">{{results[$index + 3]}}</div>
     <div class="col-xs-2">{{results[$index + 4]}}</div>
     <div class="col-xs-2">{{results[$index + 5]}}</div>  
 </div>

DEMO

var app = angular.module("app", []);

app.controller("listController", ["$scope",
  function($scope) {


    $scope.results = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r"];

   
  }
]);
<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

  <script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>

  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app='app'>
  <div ng-controller="listController" class="row">

   <div ng-repeat="result in results" ng-if="$index % 6 == 0" class="row">
<div class="col-xs-2">{{results[$index]}}</div>
<div class="col-xs-2">{{results[$index + 1]}}</div>
<div class="col-xs-2">{{results[$index + 2]}}</div>
<div class="col-xs-2">{{results[$index + 3]}}</div>
<div class="col-xs-2">{{results[$index + 4]}}</div>
<div class="col-xs-2">{{results[$index + 5]}}</div>
  </div>
    </div>
  </div>
</body>

</html>
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
-1

What i can understand from your example is that you want to give a line break after sixth element in your array. if that the case, this might able to you.

<div ng-repeat="array in arraylist ">
       <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" >
          <div class="form-group">
            <label>{{array}} <br ng-if="$index%6 == 0 " /> </label>
          </div> 
        </div>
</div>
default
  • 1
  • 1