Is it possible to use ng-repeat with an array of arrays?
Here's my view:
<div ng-repeat="item in items">
<p>{{item}}</p>
<ul>
<li ng-repeat="i in item.items">{{i}}</li>
</ul>
</div>
Here's my controller:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]
});
Here's my Plunker:
http://plnkr.co/edit/b6vRVpUKkhPANNVXkkJL?p=preview
How can I output:
1
2
3
4
5
6
7
8
9
Your problem lies with this line:
<li ng-repeat="i in item.items">{{i}}</li>
item.items is undefined because item is an array.
You should enumerate item instead of item.items:
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<ul>
<li ng-repeat="i in item">{{i}}</li>
</ul>
</div>
</body>
Here's a working Plunk.
You almost aleady have the result. It's just a little mistake in your second ng-repeat.
<div ng-repeat="item in items">
<p>{{item}}</p>
<ul>
<li ng-repeat="i in item">{{i}}</li>
</ul>
</div>
You are already in item in your second ng-repeat you don't need item.items.
There is the updated plunker : http://plnkr.co/edit/aLx05WWzFRVrocmXwr12?p=preview
Related
I have to generate numbers in sequence(continuous numbers) for both ng-repeat and for which i am using $index but that is again giving me sequence from 1 for second ng-repeat.
I tried taking a variable in scope and then incrementing in the view but that is also not working out.
Example plunker
Code:
<body ng-controller="MainCtrl">
<ul ng-repeat="detail in details">
<li><span>{{$index + 1}}</span><span> {{detail.name}}</span>
</li>
</ul>
<ul ng-repeat="detailed in details.name">
<li><span>{{$index + 1}}</span><span>{{detailed.prof}}</span></li>
</ul>
</body>
Controller:
app.controller('MainCtrl', function($scope) {
$scope.details = [
{ "name": "Employees" },
{ "name": "Support" }
];
$scope.details.name = [
{ "prof": "enginerr" },
{ "prof": "doctor" }
];
});
here in this plunker engineer number should be 3 and doctor number should be 4.
Any help would be appreciated.
Add details.length to the second ng-repeat
<body ng-controller="MainCtrl">
<ul ng-repeat="detail in details">
<li><span>{{$index + 1}}</span><span> {{detail.name}}</span>
</li>
</ul>
<ul ng-repeat="detailed in details.name">
<li><span>{{details.length + $index + 1}}</span><span>{{detailed.prof}}</span></li>
</ul>
I am trying to iterate over an array using ng-repeat to display in a list. The number of records to display should be equal to the length of a second array.
<ul>
<li ng-repeat="item in firstArray"></li>
</ul>
var firstArray = ["a","b","c","d","e","f"]
var secondArray = ["x","y","z"]
The expected result for the above example :
var output = ["a","b","c"]
Since the length of secondArray is 3, the number of li elements would be 3 with the first three values from firstArray.
Should i use filter? I am using angularjs.
Thanks
The simplest solution is to use limitTo
<ul>
<li ng-repeat="item in firstArray | limitTo:secondArray.length">{{item}}</li>
</ul>
http://plnkr.co/edit/LWh1uqNPxTy09u3MP677?p=preview
<ul>
<li ng-repeat="item in firstArray" ng-if=" $index < secondArray.length "></li>
</ul>
Use the above code, it will work
You can use AngularJs filter limitTo in ng-repeat. Refer to the below example:
At angular application side:
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
$scope.firstArray = ["a","b","c","d","e","f"]
$scope.secondArray = ["x","y","z"]
});
In your view:
<ul>
<li ng-repeat="item in firstArray | limitTo:secondArray.length">{{item}}</li>
</ul>
Maybe you should use $index to test if it has to be displayed :
<ul >
<li ng-repeat="item in firstArray" ng-if="$index < secondArray.length()" > </li>
</ul>
Just loop over your second array and access the items of the first array using firstArray[$index].
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
$scope.firstArray = ["a","b","c","d","e","f"];
$scope.secondArray = ["x","y","z"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="i in secondArray">
{{firstArray[$index]}}
</li>
</ul>
</div>
</div>
I am using ng-repeat to iterate over an array to generate <li>. But i want to stack every 2 li into div.
<li ng-repeat="item in items">{{item.name}}</li>
I want the output to be like this:
<ul>
<div>
<li>A</li>
<li>B</li>
</div>
<div>
<li>C</li>
<li>D</li>
</div>
</ul>
How should i achieve this with ng-repeat?
Thanks in advance for any help.
Although it is invalid to put div inside ul but to illustrate. i have made a function to split your array into group of 2 element array contained in wrapper array
Or You can also use splice method
Working Demo 1
angular.module('testApp',[]).controller('testCtrl', function($scope) {
$scope.items=['1','2','3'];
$scope.groupByTwo = function (array)
{
var newarray =[];
index=0;
for(a=0;a<array.length;a++){
if(a==0 || a%2==0){
newarray[index]=[];
newarray[index].push(array[a]);
}else{
newarray[index].push(array[a]);
}
if(a!=0)
index++;
}
return newarray;
}
$scope.items=$scope.groupByTwo($scope.items);
});
div {
background:pink;
border:1px dotted black;
margin-top:15px;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<ul>
<div ng-repeat="item in items">
<li ng-repeat="i in item">{{i}}</li>
</div>
</ul>
Working Demo 2
You can also use splice method
angular.module('testApp',[]).controller('testCtrl', function($scope) {
$scope.items=['1','2','3'];
var i,j,temparray=[],chunk = 2;
for (index=0,i=0,j=$scope.items.length; i<j; i+=chunk,index++) {
temparray [index]= $scope.items.slice(i,i+chunk);
}
$scope.items =temparray;
});
div {
background:pink;
border:1px dotted black;
margin-top:15px;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<ul>
<div ng-repeat="item in items">
<li ng-repeat="i in item">{{i}}</li>
</div>
</ul>
Apply ng-repeat on ul and li will act as a template which will be generated for each item.
Ex :
<ul ng-repeat="item in items">
<li>{{item.name}}</li>
</ul>
This will result in
<ul>
<li>name1</li>
<li>name2</li>
<li>name2</li>
</ul>
If you have a collection consisting of 10 items , you can split them in multiple collections each of size 2 and then apply ng-repeat with each collection on div to get the output you want.
I've tempted to do an ng-repeat that will retrieve card titles and place them into a list. Here is a section from my code that calls the content:
<ion-content class="has-header" scroll="false" ng-controller="MainCtrl">
<div id="accordian">
<ul>
<li>
<h3><span class="icon-dashboard" ng-repeat="card in cards"></span>Group 1</h3>
<ul>
<li>{{ card.title }}</li>
</ul>
</li>
Here is the controller:
.controller('MainCtrl', function($scope,$http) {
// Card Array
$scope.data = {};
$scope.cards =[
{checked: false, title:'Bank', src:'img/bank.png',details:'Description will go here!'},
{checked: false, title:'BBVA', src:'img/bbva.png',details:'Description will go here!'},
{checked: false, title:'Nike', src:'img/nike.png',details:'Description will go here!'},
];
Your current code will repeat the span tag for each card that you have inside cards. I don't think that's what you intended to do. You probably want to repeat the li, right? Try this instead:
<li ng-repeat="card in cards">
<h3><span class="icon-dashboard"></span>Group 1</h3>
<ul>
<li>{{ card.title }}</li>
</ul>
</li>
I have a set of JSON data that I would like to display in a nested list:
The JSON comes in the following format:
["Item 1", "Item 2", "Item 3", ["Nested Item 1", "Nested Item 2"]]
The html should be:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>
<ul>
<li>Nested Item 1</li>
<li>Nested Item 2</li>
</ul>
</li>
</ul>
I don't have control of the JSON, and it may be deeper than 2 levels.
Of course, I tried this:
<ul>
<li ng-repeat="item in data">{{item}}</li>
</ul>
but it doesn't work because for nested items, it simply displays the json.
How can I achieve nested lists in AngularJs?
Fiddle: http://jsfiddle.net/m7ax7tsa/
Have a look at this nice blog post that has a complete example at the end. In short you need to build nested directives, where inner directive will have recursive call to outer directive:
<body>
<div ng-controller="IndexCtrl">
<collection collection='tasks'></collection>
</div>
</body>
angular.module('APP', [])
.directive('collection', function () {
return {
...
template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
}
})
.directive('member', function ($compile) {
return {
...
template: "<li>{{member.name}}</li>",
link: function (scope, element, attrs) {
if (angular.isArray(scope.member.children)) {
element.append("<collection collection='member.children'></collection>");
$compile(element.contents())(scope)
}
}
}
I found a solution thanks to zsong and Blackhole.
Resulting HTML:
<div ng-app="testApp">
<div ng-controller="TestCtrl">
<script type="text/ng-template" id="/nestedList.html">
<ul>
<li ng-repeat="item in data">
<div ng-switch="isString( item )">
<div ng-switch-when="true">{{item}}</div>
<div ng-switch-when="false">
<!-- Recursive template!! -->
<div ng-include="'/nestedList.html'" ng-init="data = item">
</div>
</div>
</div>
</li>
</ul>
</script>
<div ng-include="'/nestedList.html'"></div>
</div>
</div>
I used a recursive template which included itself. It borrows heavily on the answer of Unknown number of sublists with AngularJS. In addition, I had to add the following code to the controller:
$scope.isString = function (item) {
return typeof item === "string";
};