AngularJS : add Active effect and hover effect on li

Question

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 code

<li ng-mouseenter="show = true" ng-mouseleave="show = false" id="home">
        <img src="images/home.png" ng-hide="show" class="whiteClass" />
        <img src="images/home_h.png" ng-show="show" class="blackClass"/>
    </li>

How can i make it as active tab using ng-click?? Thanks in advance

Update :

<li  ng-mouseenter="liMouaeEnter()" ng-mouseleave="liMouseLeave()" id="issuesLi"  ng-click="navbarclick($event , issueTab)">
        <img src="images/issues.png" ng-class="{'active': !isActive, 'inactive': isActive}"/>
        <img src="images/issues_h.png" ng-class="{'active': isActive, 'inactive': !isActive}"/>

    </li>

Here jS file on controller

  var navClickBool = false;
  $scope.liMouaeEnter = function(){
    $scope.isActive = false;
    this.isActive = true;
    navClickBool = false
   }

 $scope.navbarclick = function(event , template){
   $scope.isActive = false;  
   this.isActive = true;
   navClickBool = true

 }

 $scope.liMouseLeave = function(){
   if(navClickBool){
      return
   }
   this.isActive = false;
  }

Answer 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 ).

<div ng-init="isActive = false">    
    <div ng-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; ).