Toggle angular attribute on ng-click

Question

I have a Google Map, with markers that I want to toggle on and off.

<marker id='{{marker.id}}   'visible="{{ condition ? 'true' : 'false'}}">
</marker>

And I made a button for toggling it off

<button ng-click="condition = false" ng-init="condition = true">
     Toggle visibility
</button>

How do I make it switch between toggling the condition true/false, on the same click?

Or maybe using a toggle functionality.

Use condition = !condition as the value for the ng-click attribute — IAmDranged, Dec 16 '16 at 12:56

score 1 · Answer 1 · edited Dec 16 '16 at 13:15

1

just use ng-show and invert condition variable on button click

<marker id='{{marker.id}}   ng-if="condition"></marker>
<button ng-click="condition = !condition" ng-init="condition = true">Toggle visibility</button>

edited Dec 16 '16 at 13:15

Bo Vandersteene

601
7
16

answered Dec 16 '16 at 12:59

Shaybi

318
2
9

score 1 · Accepted Answer · edited May 23 '17 at 12:08

1

<marker id='{{marker.id}}   ng-if="condition"></marker>
<button ng-click="condition = !condition" ng-init="condition = true">Toggle isibility</button>

Use ng-if over ng-show, this is another discussion When to favor ng-if vs. ng-show/ng-hide?

edited May 23 '17 at 12:08

Community

1
1

answered Dec 16 '16 at 13:12

Bo Vandersteene

601
7
16

Toggle angular attribute on ng-click

2 Answers2