AngularJS "accordion" loading & unloading DOM elements using ng-click

Question

My page has several categories, with content stored in JSON files. On page load, the categories have no content. When the category heading is clicked, its contents are loaded. When it is clicked again, or another category is clicked, its contents should be removed.

On my current sketch (Plunkr) the loading of content on ng-click works, but all categories are populated with the content of the category clicked. I'm calling it like this:

  <div ng-controller="FoodCtrl">
    <h3 ng-click="loadFood('food1')">Food 1</h3>

       <div class="food origin">
              <food-list />
       </div>

    <h3 ng-click="loadFood('food2')">Food 2</h3>

          <div class="food origin">
               <food-list />
          </div>

  </div>

The problem as I can see it is that I am not limiting the scope of what is loaded into <food-list />, so both lists get the same content. How can I restructure this so that <food-list /> has a context of "current active category"? Would a "toggle" function (like this JSFiddle) work better for this?

Ila · Accepted Answer · 2013-10-31 15:02:00Z

1

The novice AngularJS user discovers the magic of ng-show, using a a variable category that was already in my controller:

  <div ng-controller="FoodCtrl">
     <h3 ng-click="loadFood('food1')">Food 1</h3>

     <div class="food origin">
        <food-list ng-show="category == 'food1' "  />
     </div>

    <h3 ng-click="loadFood('food2')">Food 2</h3>

    <div class="food origin">
         <food-list  ng-show="category == 'food2' " />
    </div>

  </div>

answered Oct 31, 2013 at 15:02

Ila

3,5588 gold badges51 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS "accordion" loading & unloading DOM elements using ng-click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related