To form a drop down on side menu of ionic framework
Question
I am new to this ionic framework so my task is to make nested drop down on side menu which i have made and its working fine. When i click on any item like "act&ser" it show its list and then again i click on "Courses" it again show another list inside it.By clicking it again the method toggle123('{{ChildNames.id}}') hide its list.
But the problem is when i again click on "act&ser" which run toggle('{{x.id}}') method to hide my whole dropdown list but its not hiding. I want my dropdown list to get hide on clicking "act&ser" So can you please help me.
Here my image is Link of Image what i have made
In menu.html file
<ion-list>
<ion-item ng-repeat="x in names" ng-click = "toggle('{{x.id}}')">
{{ x.name }}
<ion-list ng-show="myVar_{{x.id}}">
<ion-item ng-repeat="ChildNames in x.children" ng-click = "toggle123('{{ChildNames.id}}')">
{{ChildNames.name}}
<ion-list ng-show="myVar1_{{ChildNames.id}}" >
<ion-item ng-repeat="NestedChildNames in ChildNames.children1" >
{{NestedChildNames.name}}
</ion-item>
</ion-list>
</ion-item>
</ion-list>
</ion-item>
In controller file the function is
$scope.toggle123 = function(parentid1) {
$scope['myVar1_'+parentid1] = !$scope['myVar1_'+parentid1];
console.log("Hiiiiiiiiiiiiii I am here");
};
$scope.toggle = function(parentid) {
//$scope['myVar_'+parentid] = !$scope['myVar_'+parentid];
if(flag)
{
$scope['myVar_'+parentid] = 'true';
flag = false;
//console.log($scope['myVar_'+parentid]);
}
else
{
$scope['myVar_'+parentid] = 'false';
//console.log($scope['myVar_'+parentid]);
flag = true;
}
};
My json format is
[
{
"children":[
{
"children1":[
{
"name":"Arts & Lifestyle",
"id":4
},
{
"name":"Fitness Classes",
"id":12
},
{
"name":"Language Classes",
"id":16
},
{
"name":"Performing Arts",
"id":38
},
{
"name":"Sports Classes",
"id":70
},
{
"name":"Educational Classes",
"id":82
},
{
"name":"Kids Courses",
"id":91
}
],
"name":"Courses",
"id":3
},
{
"children1":[
{
"name":"Aircon Services",
"id":93
},
{
"name":"Cleaning Services",
"id":94
},
{
"name":"Corporate Sales",
"id":95
},
{
"name":"Courts Connect",
"id":96
},
{
"name":"Courts Flexi Plans",
"id":97
}
],
"name":"Courts Services",
"id":92
},
{
"children1":[
{
"name":"Restaurant",
"id":99
},
{
"name":"Café",
"id":100
},
{
"name":"Fast Food",
"id":101
},
{
"name":"Buffet",
"id":102
},
{
"name":"Pubs & Bars",
"id":103
}
],
"name":"Dining Vouchers",
"id":98
},
{
"children1":[
],
"name":"Extended Warranties",
"id":104
},
{
"children1":[
{
"name":"Adventure Parks",
"id":106
},
{
"name":"Gaming",
"id":107
},
{
"name":"Movies",
"id":108
},
{
"name":"Sports Activities",
"id":109
},
{
"name":"Theatres",
"id":128
}
],
"name":"Leisure & Entertainment",
"id":105
},
{
"children1":[
{
"name":"Africa",
"id":133
},
{
"name":"Asia",
"id":134
},
{
"name":"Australia",
"id":135
},
{
"name":"Europe",
"id":136
},
{
"name":"North America",
"id":137
},
{
"name":"South America",
"id":138
},
{
"name":"Southeast Asia",
"id":139
}
],
"name":"Travel",
"id":132
}
],
"name":"act & ser",
"id":2
},
{
"children":[
{
"children1":[
],
"name":"Services",
"id":141
},
{
"children1":[
{
"name":"Anniversary",
"id":143
},
{
"name":"Birthday",
"id":148
},
{
"name":"Condolences",
"id":153
},
{
"name":"Farewell",
"id":156
},
{
"name":"Get Well",
"id":161
},
{
"name":"Graduation",
"id":166
},
{
"name":"Grand Opening",
"id":169
},
{
"name":"Housewarming",
"id":174
},
{
"name":"Love & Romance",
"id":179
},
{
"name":"Mother's Day Flowers",
"id":186
},
{
"name":"New Borns",
"id":190
},
{
"name":"Thank You",
"id":195
},
{
"name":"Wedding",
"id":200
}
],
"name":"Flowers",
"id":142
},
{
"children1":[
{
"name":"Cakes",
"id":206
},
{
"name":"For Her",
"id":207
},
{
"name":"For him",
"id":208
},
{
"name":"For Newborns and Mums",
"id":209
}
],
"name":"Gift",
"id":205
},
{
"children1":[
],
"name":"Gift Vouchers",
"id":210
},
{
"children1":[
{
"name":"Chocolate Baskets",
"id":212
},
{
"name":"Fruit Baskets",
"id":213
},
{
"name":"Gourmet Hampers",
"id":214
},
{
"name":"Organic Hampers",
"id":215
},
{
"name":"Wellness Hampers",
"id":216
},
{
"name":"Wine Hampers",
"id":217
}
],
"name":"Hampers",
"id":211
},
{
"children1":[
{
"name":"Beer",
"id":219
},
{
"name":"Liquor",
"id":232
},
{
"name":"Wine",
"id":238
}
],
"name":"Wine, Beers & Spirits",
"id":218
}
],
"name":"Alcohol, Flowers & Gifts",
"id":140
},
{
"children":[
{
"children1":[
],
"name":"Services",
"id":248
},
{
"children1":[
{
"name":"Baby Girl",
"id":250
},
{
"name":"Baby Boy",
"id":266
}
],
"name":"Baby",
"id":249
},
{
"children1":[
{
"name":"Tops & Tees",
"id":280
},
{
"name":"Bottom",
"id":283
},
{
"name":"Clothing Sets",
"id":287
},
{
"name":"Shoes",
"id":288
},
{
"name":"Sleepwear",
"id":289
},
{
"name":"Socks",
"id":290
},
{
"name":"Swimwear",
"id":294
},
{
"name":"Undergarments",
"id":299
}
],
"name":"Boy",
"id":279
},
{
"children1":[
{
"name":"Bottom",
"id":306
},
{
"name":"Clothing Sets",
"id":314
},
{
"name":"Shoes",
"id":315
},
{
"name":"Sleepwear",
"id":316
},
{
"name":"Socks & Hosiery",
"id":317
},
{
"name":"Swimwear",
"id":322
},
{
"name":"Tops & Tees",
"id":328
},
{
"name":"Undergarments",
"id":333
}
],
"name":"Girl",
"id":305
},
{
"children1":[
{
"name":"Accessories",
"id":339
},
{
"name":"Bottom",
"id":373
},
{
"name":"Clothing Sets",
"id":380
},
{
"name":"Hoodies & Sweatshirts",
"id":381
},
{
"name":"Jacket & Coats",
"id":382
},
{
"name":"Men Underwear",
"id":383
},
{
"name":"Outerwear",
"id":389
},
{
"name":"Shirts",
"id":390
},
{
"name":"Socks",
"id":395
},
{
"name":"Swimwear",
"id":403
},
{
"name":"Weatherwear & Accessories",
"id":409
},
{
"name":"Shoes",
"id":426
}
],
"name":"Men",
"id":338
},
{
"children1":[
{
"name":"Accessories",
"id":440
},
{
"name":"Bottom",
"id":500
},
{
"name":"Clothing Sets",
"id":506
},
{
"name":"Dresses",
"id":507
},
{
"name":"Jumpsuits",
"id":512
},
{
"name":"Maternity",
"id":513
},
{
"name":"Outerwear",
"id":514
},
{
"name":"Shoes",
"id":515
},
{
"name":"Sleepwear",
"id":528
},
{
"name":"Socks & Hosiery",
"id":529
},
{
"name":"Swimwear",
"id":539
},
{
"name":"Tops & Tees",
"id":544
},
{
"name":"Underwear",
"id":550
},
{
"name":"Weatherwear & Accessories",
"id":568
}
],
"name":"Women",
"id":439
}
],
"name":"Apparels , Accessories & Shoes",
"id":247
},
{
"children":[
{
"children1":[
],
"name":"Services",
"id":586
},
{
"children1":[
{
"name":"Automobile",
"id":588
},
{
"name":"Car Accessories",
"id":592
},
{
"name":"Car Care",
"id":609
},
{
"name":"Spare Parts",
"id":626
},
{
"name":"Wheels & Tyres",
"id":641
}
],
"name":"Automotive",
"id":587
},
{
"children1":[
{
"name":"Air Refreshener",
"id":649
},
{
"name":"Batteries",
"id":653
},
{
"name":"Dishwashing",
"id":654
},
{
"name":"Household Cleaning",
"id":658
},
{
"name":"Laundry",
"id":669
},
{
"name":"Paper & Plastic",
"id":678
},
{
"name":"Pest Control",
"id":684
}
],
"name":"Household essentials",
"id":648
},
{
"children1":[
{
"name":"Birds",
"id":695
},
{
"name":"Cats",
"id":704
},
{
"name":"Dogs",
"id":710
},
{
"name":"Fish & Aquatic Pets",
"id":717
},
{
"name":"Small Animals",
"id":722
}
],
"name":"Pet feeding",
"id":694
},
{
"children1":[
{
"name":"Birds",
"id":730
},
{
"name":"Cats",
"id":731
},
{
"name":"Dogs",
"id":742
},
{
"name":"Fish & Aquatic Pets",
"id":753
},
{
"name":"Small Animals",
"id":754
}
],
"name":"Pet Grooming",
"id":729
},
{
"children1":[
{
"name":"Birds",
"id":759
},
{
"name":"Cats",
"id":760
},
{
"name":"Dogs",
"id":761
},
{
"name":"Fish & Aquatic Pets",
"id":766
},
{
"name":"Small Animals",
"id":769
}
],
"name":"Pet Housing",
"id":758
},
{
"children1":[
{
"name":"Birds",
"id":771
},
{
"name":"Cats",
"id":772
},
{
"name":"Dogs",
"id":778
},
{
"name":"Small Animals",
"id":785
}
],
"name":"Pet Toys",
"id":770
},
{
"children1":[
{
"name":"Birds",
"id":787
},
{
"name":"Cats",
"id":788
},
{
"name":"Dogs",
"id":791
},
{
"name":"Fish & Aquatic Pets",
"id":794
},
{
"name":"Small Animals",
"id":795
}
],
"name":"Pet travelling",
"id":786
}
],
"name":"Automotive, Household & Pets",
"id":585
},
{
"children":[
{
"children1":[
],
"name":"Services",
"id":799
},
{
"children1":[
{
"name":"Camera Accessories",
"id":801
},
{
"name":"Compact Camera",
"id":810
},
{
"name":"Digital Camera",
"id":811
},
{
"name":"DSLR",
"id":812
},
{
"name":"Interchangable Lens Camera",
"id":813
}
],
"name":"Cameras",
"id":800
},
{
"children1":[
{
"name":"All-In-One",
"id":815
},
{
"name":"Chromebooks",
"id":816
},
{
"name":"Desktop",
"id":817
},
{
"name":"Laptops Accessories",
"id":818
},
{
"name":"Notebooks",
"id":822
},
{
"name":"Ultrabooks",
"id":823
}
],
"name":"Computers",
"id":814
},
{
"children1":[
{
"name":"All-In-One (AIO) Machines",
"id":825
},
{
"name":"Computer Parts",
"id":826
},
{
"name":"Fax Machine",
"id":831
},
{
"name":"Keyboard",
"id":832
},
{
"name":"Monitor",
"id":836
},
{
"name":"Mouse",
"id":837
},
{
"name":"Photocopying Machine",
"id":841
},
{
"name":"Printer",
"id":842
},
{
"name":"Scanner",
"id":845
}
],
"name":"Hardware",
"id":824
},
{
"children1":[
{
"name":"Audio",
"id":847
},
{
"name":"Earpiece",
"id":855
},
{
"name":"Headphone",
"id":859
},
{
"name":"Home Entertainment Accessories",
"id":863
},
{
"name":"Vision",
"id":868
}
],
1 answers
solution1
0 2015-06-23 11:16:02
I assume that your problem is here :
ng-click = "toggle123('{{ChildNames.id}}')">
that shall be
ng-click = "toggle123(ChildNames.id)">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Adding side-menu in ionic framework
how to make nested side menu in ionic-framework?
Using a toggle button inside side menu ionic framework
Ionic Framework - Integrate side-menu with Introduction page getting issue
Ionic framework UI router bug in Drawer side menu content?
Ionic drop down IOS
How to select a drop down menu value using robot framework?
Side Menu issue in ionic
Ionic Side Menu
Ionic Side Menu Issue
Related Tags