CODEWITHSUNDEEP
javascriptangularjsiconstoggle
Norbert Norbertson
Norbert Norbertson

Reputation: 2210

toggle an icon in ng-repeat in angular js

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?

Upvotes: 0

Views: 497

Answers (1)

sjahan
sjahan

Reputation: 5940

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.

Upvotes: 1

Related Questions