Angularjs : Add Active Effect And Hover Effect On Li

Hello I am facing problem to make Li as Active tab, I already add hover effect but How to add Active tab?. I user Angular's ng-show and ng-hide to change icon in li. Here is my cod

Solution 1:

If you need to toggle a class on an element, not only show/hide it, you can use ng-class instead of ng-hide/ng-show. ng-class automatically adds/removes a class based on the truth value of a $scope variable. You can toggle that truth value on ng-click (that automatically binds the onClick event to the DOM node, just like on-mouseenter binds onMouseenter).

<divng-init="isActive = false"><divng-click="isActive = !isActive "ng-class="{'active': isActive}"><em>Foo</em></div></div>

You now only have to write the .active { } CSS rule.

Also, you can add multiple rules on ng-class

ng-class="{'active': isActive, 'inactive': !isActive}"

and this will work as expected (switching between the two classes).

Note that I'm using ng-init to initialize my Boolean to false. You can also initialize it directly in the controller ($scope.isActive = false;).