To form a nested drop down list on side menu


#1

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 is image what i want in which “act&ser” and then its childern like “Courses” which has also it’s children like “Arts&Lifestyle”

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

 $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;
     }        
};

and the json 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
         },

#2

W/out a codepen or fiddle hard to know but I’m guessing you’ve getting caught by issues with prototypal inheritance, when you call toggle123 i suspect it’s creating another scope variable which shadows the parent scope variable (i.e. two separate variables same name, different scope)

Instead of ‘myVar_{{x.id}}’ try sticking them in another object so like ‘data.myVar_{{x.id}}’

If that fixes it take a read of this, explains everything a log better than I could: https://github.com/angular/angular.js/wiki/Understanding-Scopes


#3

Thanks for your response but it still not working.I have made change

<ion-list data-ng-controller = 'MyappCtrl'>
        <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>

and in controller

  $scope.toggle123 = function(parentid1) {
    $scope['myVar1_'+parentid1]  = !$scope['myVar1_'+parentid1];
    console.log("hiiiichi"+parentid1);
     
};

$scope.toggle = function(parentid) {
    //$scope['data.myVar_'+parentid]  = !$scope['myVar_'+parentid];
    if(flag)
     {
        $scope['data.myVar_'+parentid] = 'true';  
        flag = false;
        console.log(parentid);
     }
     else
     {
     	$scope['data.myVar_'+parentid] = 'false';
     	console.log("hii "+parentid);
     	flag = true;
     }  	  
};

But Now when i click on “act&ser” then it does not show any list which was previously showing.

Now When I print my result on console.

 $scope.toggle123 = function(parentid1) {
        $scope['myVar1_'+parentid1]  = !$scope['myVar1_'+parentid1];
        console.log("hiiiichi"+parentid1);
         
    };

    $scope.toggle = function(parentid) {
        //$scope['myVar_'+parentid]  = !$scope['myVar_'+parentid];
        if(flag)
         {
            $scope['myVar_'+parentid] = 'true';  
            flag = false;
            console.log(parentid);
         }
         else
         {
         	$scope['myVar_'+parentid] = 'false';
         	console.log("hii "+parentid);
         	flag = true;
         }  	  
    };

then when i click on “act&ser” then on console it print ‘2’.
but when i click on “courses” then it print both ‘hiiiichi3’ 'hii 2’
when again i click on “courses” then it print both ‘hiiiichi3’ ‘2’ after hiding list.
but when i click on “act&ser” then it print ‘hii2’ or ‘2’ but does not hiding

My question is why on clicking courses it run function toggle() which i haven’t define there


#4

Can you please tell me Is there any other way to make it