Angularjs Add class to Active Element ng-class Menu

Angularjs Add class to Active Element ng-class Menu

In this Post We Will Explain About is Angularjs Add class to Active Element ng-class Menu With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to angularjs – Adding class to an element on its click event

In this post we will show you Best way to implement Angular js add class to active element , hear for How to angularjs – Adding class to element using Angular JS with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Angular js add class to active element

Now we were building a simple step by step AngularJS site with a simple menu and ran into the problem of how to simple highlight the active simple menu item based on the based url. After some research as well as and trial and some error we figured the simple best option is to use a demo directive. we would simply html add an attribute click to every list item we like to be simple watched and compare data the current simple path with the active menu href of the item.”How to add class active to a menu with AngularJS”

index.html

 
<ul>
<li ng-repeat="productList in products" ng-click="select(productList)"            
  ng-class="{active: isActive(productList)}" >
 <div>{{ productList.name }}</div> 
 </li>
 </ul> 

index.js

 $scope.select= function(item) {
        $scope.selected = item; 
 };

 $scope.isActive = function(item) {
        return $scope.selected === item;
 };

Example 2 : angularjs – How to set active class on ng-click

In Javascript add a simple directive. Note that the angularjs name of the directive is same case.

index.js (How to add class active to a menu with AngularJS)

var myapp = angular.module('liveApp', [ ]);
myapp.controller('liveCtrl', function ($scope) {

 $scope.showData = function( ){
     $scope.products = [
    {"name": "infinityknow.com angular"},
    {"name": "infinityknow.com knockout"},
    {"name": "infinityknow.com backbone"},
    {"name": "infinityknow.com jquery"},
    {"name": "infinityknow.com javascript"}
    
]
}
 $scope.select= function(item) {
	       $scope.selected = item; 
	};
$scope.isActive = function(item) {
	       return $scope.selected === item;
	};
}); 

index.html

<div ng-app="liveApp">
    <div ng-controller="liveCtrl" ng-init="showData()">      
 <ul>
 <li class="paginationclass" ng-repeat="productList in products" ng-click="select(productList)" ng-class="{active: isActive(productList)}">
 <div>{{ productList.name }} </div> 
 </li>
</ul> 

Example

I hope you have Got Add class active to a menu with AngularJS directive And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.