ng-if to change class and ng-click

Question

<i class="tables__td--status icon icon__thumbs-up" ng-click="EventController.retrieveOne(event._id); EventController.changeStatus(event._id, event, false)"></i>

and

<i class="tables__td--status icon icon__thumbs-down" ng-click="EventController.retrieveOne(event._id); EventController.changeStatus(event._id, event, true)"></i>

Guys, i have this two actions in one page, one is for desactive and other to active an event.

Currently both appear in the page, i'm trying to figure out how show only one.

If event._id = true, show this:

<i class="tables__td--status icon icon__thumbs-up" ng-click="EventController.retrieveOne(event._id); EventController.changeStatus(event._id, event, false)"></i>

If is false, show:

<i class="tables__td--status icon icon__thumbs-down" ng-click="EventController.retrieveOne(event._id); EventController.changeStatus(event._id, event, true)"></i>

The problem is that i need change the class and the ng-click.

Thanks.

Answer 1

You don't need ng-if you can do like that:

<i  ng-class="{icon__thumbs-down:show,icon_thumbs-up:!show}" 
class="tables__td--status icon" 
ng-click="show=!show;EventController.retrieveOne(event._id); EventController.changeStatus(event._id, event, !show)">
</i>

I added to ng-click to change the status (show=!show), then I change the class based on the status ( ng-class )

Answer 2

使用ngClass更改class取决于event._id值：

<i class="tables__td--status icon" ng-class="{'icon__thumbs-up':event._id === true, 'icon__thumbs-down':event._id === false}" ng-click="EventController.retrieveOne(event._id); EventController.changeStatus(event._id, event, false)"></i>