How to use nested ng-repeat in ionic List/ Collapsible List

ionic-v1
1

I want to achieve the nested list and in trouble using ngrepeat within ngrepeat so please help me.what I want is let me explain by example.

List1
-name1
-name2
-name3
-name4
List2
-name1
-name2
List3
-name1

and so forth.

var list = [
{title: ‘list1’, contacts: [“name1”,“name2”,“name3”,“name4”]},
{title: ‘list2’,contacts: [“name1”,“name2”]},
{title: ‘list3’,contacts: [“name1”]},
{title: ‘list4’, contacts: [“name1”,“name2”,“name3”]},
{title: ‘list5’,contacts: [“name1”,“name2”]}
];

Simply I want the list of lists, and collapseable list.

Please help me

2

You need to need your ng-repeat. Maybe something like :

<div ng-repeat="group in lists" class="item item-divider">
	{{group.title}}
	<div ng-repeat="item in group.contacts" class="item">
		{{item}}
	</div>
</div>
3

And if don’t have a sublist ( like rubrica )? That is:

var list = [
{title: ‘list1’, name1},
{title: ‘list2’,name1},
{title: ‘list3’,name2},
…
];

4

@Calendee I have created the nested list have a look at that http://codepen.io/asadfida/pen/oknzL

The issue is when I select a list all the lists shows the sub-list/lists.So I want to open sub-list of only the selected item.How to I do this please guide me.
Thank you for reading.

5

I think you are looking for “Accordion Lists”. See this : http://codepen.io/ionic/pen/uJkCz

1 Like
6

How can we use a collection-repeat here, to increase the performance since I have hundreds of items per group?

I get a ionScroll directive not found.