toggle an icon in ng-repeat in angular js

Question

In the following code I am attempting to show a plus sign [+] for a series of regions. When the user clicks the plus sign the sub regions appear below AND the plus sign changes to a minus [-] sign.

The regions are displayed correctly and when the link is clicked the sub regions are displayed correctly. However, I cannot seem to get show/hide to work for the plus and minus and I need the sub regions to hide when the user clicks the minus to collapse the list again.

<div ng-repeat="item1 in vm.Regions track by $index">
    {{item1}}
    <a ng-click="vm.expandIt(item1)">
        <span>[+]</span> 
        <span>[-]</span>
    </a>
    <input type="checkbox" />

    <div ng-if="vm.collapseId==item1" ng-repeat="item2 in vm.data | filter:{'Region':  item1}:true">
        {{item2.CCG}}<input type="checkbox" ng-model="item2.Selected" />
    </div>

</div>

The expandIt function looks like this:

function expandIt(item) {
  vm.collapseId = item;
  console.log(`expand called!:${vm.collapseId}`)
}

Can anyone please point me in the right direction?

What you are trying to create is called an Accordion. You can find many components already created. Also, ng-click="vm.expandIt(item1) should be on <span>[+]</span> and vice-versa on <span>[-]</span> — Rajesh Dixit
– Rajesh Dixit, Commented Oct 17, 2017 at 8:00
if this is your criteria to show the region: ng-if="vm.collapseId==item1" (i guess only one region can be opened), you can try in expandIt function: vm.collapseId = (vm.collapseId == item) ? false : item; which will alternate the value if already set to this value — Kaddath
– Kaddath, Commented Oct 17, 2017 at 8:03
yes, that helped, thanks guys.. getting there. Will try the answer just in. — Norbert Norbertson
– Norbert Norbertson, Commented Oct 17, 2017 at 8:07

sjahan · Accepted Answer · 2017-10-17 08:01:34Z

1

You could do something like this:

<a ng-click="vm.expandIt(item1)">
    <span>{{item1.label}}</span> 
</a>

Where label is defined to [+] or [-] according to the status of the item.

Another way could be:

<a ng-click="vm.expandIt(item1)">
    <span ng-if="!item1.expanded">[+]</span> 
    <span ng-if="item1.expanded">[-]</span>
</a>

Where expanded is the status of your item1.

answered Oct 17, 2017 at 8:01

sjahan

5,9804 gold badges24 silver badges46 bronze badges

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

4 Comments

Rajesh Dixit Over a year ago

Though this is one of the way, just update the name of the function as expandIt for hide sounds wrong.

sjahan Over a year ago

I agree, I would rather rename toggleItem or something that implies both the expand and the collapse actions.

Norbert Norbertson Over a year ago

I went with the second option in the answer since I prefer to keep the markup in the file. Thanks for your help guys. Much appreciated.

sjahan Over a year ago

Glad it helped you ;) have a nice day!

Collectives™ on Stack Overflow

toggle an icon in ng-repeat in angular js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related