Angular Add and remove Active class on click ng toggle
Today, We want to share with you Angular Add and remove Active class on click ng toggle.
In this post we will show you How to Add and remove active class on click using AngularJS, hear for Add Class, Remove Class or Toggle Class to div using AngularJS we will give you demo and example for implement.
In this post, we will learn about Add or Remove css class to HTML element in angularJS with an example.
angular active class on click
see I have step by step explained (Add active class to an active element append class) about adding a new active class on click button and change.
But if we need to change nav menu to remove the active class on button clicking the item again more times.
now Let us check and easy ro understand how it will work.
The web app used to app header and app footer of an application basic need are typically outside the angularjs scope of all the content or angularjs controller you are working on.
This makes active class menu and managing the navigation different state a little more to challenging.
In my apps case, to managing active class to navigation state is add class to simply applying an active class to nav menu a particular element.
[php]
[/php]
angular active class on click File Name : app.js
[php]
var navapp = angular.module(‘navmenuapp’, []);
navapp.controller(‘navmenuMainCtrl’, function($scope) {
$scope.listmenuItemsdata = [‘Home’,’Tools’,’About Us’,’Services’,’Portfolio’,’Contact’, ‘Products’, ‘Other’,’Download’];
$scope.navmenuactiveMenu = $scope.listmenuItemsdata[0];
$scope.navsetActivemenu = function(navmenuItemname) {
$scope.navmenuactiveMenu = navmenuItemname
}
});
[/php]
style.css
[css]
/* include or Put your css in here style.css file */
.active {
background : red;
}
[/css]
Alternate Way Simple – angular active class on click
A very Simple and elegant – esay way is to use angularjs ng-controller to run a single controller used to outside of the ng-view data changes:
[php]
[/php]
and specific path to include in controllers.js:
HeaderMenucontrollers.js
[php]
function NavHeaderMenuController($scope, $location)
{
$scope.navisActiveMenu = function (setviewLocationname) {
return setviewLocationname === $location.path();
};
}
[/php]