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?
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>
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>
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"];
}
]);
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="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="[email protected]" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="[email protected]" 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>
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>
