AngularJS: How to toggle element from controller

Question

How can I use the following controller to toggle the content inside li tag? Right now the content is rendered only after that span is clicked, but it won't hide if I click again the span.

Here's my code:

<span ng-click="get_menu_items(folder)>
  <i class="fa fa-folder-o"></i>
  {{ folder.name }}
</span>
<ul>
    <li class="item" ng-repeat="file in folder.files">
      <label>
        <input type="checkbox" name="file_map[]" value="{{ file.id }}"  ng-model="file_map[file.id]" ng-click="update_selection(file.id)"/>
        <i class="fa fa-file-o"></i>
        <span>{{ file.name }}</span>
      </label>
    </li>
    <li menuitem ng-repeat="folder in folder.folders" ng-model="folder"></li>
</ul>

Controller:

scope.get_menu_items = function(folder){
    http.get("/api/folders/" + folder.id).success(function(data){
        folder.folders = data.data.folders;
        folder.files= data.data.files;
    })
}

It won't be hide at the moment

asdf_enel_hak
– asdf_enel_hak

2016-03-29 10:14:08 +00:00
Commented Mar 29, 2016 at 10:14 — asdf_enel_hak
– asdf_enel_hak, Commented Mar 29, 2016 at 10:14

M. Junaid Salaat · Accepted Answer · 2016-03-29 10:27:45Z

You can simply create a boolean for show/hide and toggle it on your click method like.

scope.get_menu_items = function(folder){
   //if folder.folder exist means we don't need to make $http req again
   if(folder.folders){
      $scope.showFolder = !$scope.showFolder
   }
   else{
      http.get("/api/folders/" + folder.id).success(function(data){
       folder.folders = data.data.folders;
       folder.files= data.data.files;
       $scope.showFolder = true;
      })
   }
}

and add ng-if on your view like.

<span ng-click="get_menu_items(folder)>
  <i class="fa fa-folder-o"></i>
  {{ folder.name }}
</span>
<ul ng-if="showFolder">
    <li class="item" ng-repeat="file in folder.files">
      <label>
        <input type="checkbox" name="file_map[]" value="{{ file.id }}"  ng-model="file_map[file.id]" ng-click="update_selection(file.id)"/>
        <i class="fa fa-file-o"></i>
        <span>{{ file.name }}</span>
      </label>
    </li>
    <li menuitem ng-repeat="folder in folder.folders" ng-model="folder"></li>
</ul>

Hope it helps.

Mogsdad · Accepted Answer · 2016-04-01 02:24:07Z

0

Add a global variable in controller as scope. Outside controller, add a variable (for example called: toggleVariable) and assign it to false. Inside controller put this: scope.toggleVariable = !scope.toggleVariable;

In HTML, add to ul tag: ng-show="toggleVariable".

Give it a try

edited Apr 1, 2016 at 2:24

Mogsdad

46k21 gold badges167 silver badges289 bronze badges

answered Mar 29, 2016 at 10:14

dpaul1994

3203 silver badges16 bronze badges

13 Comments

Valip Over a year ago

I have a problem with this...if I have two li inside that ul element then the second li toggles content of first li item

dpaul1994 Over a year ago

Well you said that you want to expand and collapse the content of ul when you click on span, right?

Valip Over a year ago

No, sorry, I didn't make myself clear. I want to expand the content inside of li when I click on span.

dpaul1994 Over a year ago

Ok, but which li? Both in the same time?

Valip Over a year ago

Yes, but only if I click on the second li. The first li works fine.

|

Collectives™ on Stack Overflow

AngularJS: How to toggle element from controller

2 Answers 2

Comments

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related