I have 3 routes containing 3 forms
Im trying to set bootstrap active class on current tab based on the current route in angular.I used angular route module.
How can I achieve this.
I m attaching the js code please check and help please
angular.module('bankAppOnline', ['ngSanitize','ngRoute','ngAnimate','ngQuantum'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/firststep', {
templateUrl: 'templates/firstformtemplate.html',
controller: 'firstformCtrl',
containerClass: 'active'
}).
when('/secondstep', {
templateUrl: 'templates/secondformtemplate.html',
controller: 'secondformCtrl',
containerClass: 'active'
}).
when('/thirdstep', {
templateUrl: 'templates/thirdformtemplate.html',
controller: 'thirdformCtrl',
containerClass: 'active'
}).
otherwise({
redirectTo: '/firststep'
});
}])
.run(function($rootScope){
$rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
console.log(event);
console.log(toState);
console.log(fromState);
console.log(toParams);
$rootScope.containerClass = toState.containerClass;
});
})
.controller('Main-Ctrl',function($scope)
{
$scope.containerClass = "active";
})
.controller('firstformCtrl', function ($scope, Customer) {
$scope.cities = ['Hyderabad','Vizag','Vijayawada','Bangalore','Delhi','Mumbai','Chennai','Noida','Pune','Tirupathi'];
$scope.professions = ['Doctor','Teacher','Engineer','Lawyer'];
$scope.customer = Customer.get();
$scope.reset = function() {
$scope.firstform.$setPristine();
var restore = {
"firstname": "",
"lastname": "",
"age": "",
"city": "",
"profession": "",
"mobile": ""
};
angular.extend($scope.customer, restore);
}
})
.controller('secondformCtrl', function ($scope, Customer) {
$scope.designations = ['ChairmanVice Chairman',
'Chairman cum Managing Director',
'Managing Director',
'Sr. Vice president',
'Vice President',
'General Manager',
'Joint General Manager',
'Deputy General Manager',
'Asst. General Manager',
'Chief Manager',
'Sr. Manager',
'Manager',
'Joint Manager',
'Deputy Manager',
'Asst. Manager',
'Sr. Officer',
'Officer',
'Jr. Officer',
'Sr. Associate',
'Associate',
'Jr. Associate',
'Assistant' ];
$scope.customer = Customer.get();
$scope.reset = function() {
$scope.secondform.$setPristine();
var restore = {
"pan":"",
"income":"",
"company":"",
"designation":"",
"address":"",
"pin":""
};
angular.extend($scope.customer, restore);
}
})
.controller('thirdformCtrl', function ($scope,$http,Customer,$alert) {
$scope.accounts = ['Savings','Basic checking','Interest-bearing','Market-Deposits','Certificates of deposit'];
$scope.customer = Customer.get();
$scope.reset = function() {
$scope.thirdform.$setPristine();
var restore = {
"accountType":"" ,
"fdCheck":false,
"creditcardCheck":false
};
angular.extend($scope.customer, restore);
};
$scope.sendPost = function() {
var data = $scope.customer;
console.log($scope.customer);
$http.post("/users", data).success(function(data, status) {
$scope.status = status;
$alert('form saved successfully.','Oley!', 'success', 'top-right');
console.log($scope.status);
})
.error(function(response, status){
//$alert(options)
//for using more option create object
$alert({title:'Error', content:'An error occured',placement:'top-right',alertType:'danger'});
})
};
})
.factory('Customer', function () {
var customer = {
"firstname": "",
"lastname": "",
"age": "",
"city": "",
"profession": "",
"mobile": "",
"accountType": "",
"fdCheck": false,
"creditcardCheck": false,
"pan": "",
"income": "",
"company": "",
"designation": "",
"address": "",
"pin": ""
};
return {
get: function () {
return customer;
}
}
});
This can be achieved using ng-class. Just make use of $location in your controller. This example is quite simple. Here we add an active class to div when $location.path() equals '/'.
Then we setup a conditional ng-class in our view that adds the active class.
View
<div ng-class="{active: location === '/'}">
<p>The parent DIV will have active class added when location path equals '/'</p>
</div>
Controller
.controller('MainCtrl', function ($scope, $rootScope, $location) {
$scope.location = $location.path();
$rootScope.$on('$routeChangeSuccess', function() {
$scope.location = $location.path();
});
});
Since you tagged your question with angular-ui-router I assume you are using it.
Using UI routers ui-sref combined with ui-sref-active will let you assign a class for the currently active state (or any child states).
Here for example. If state is app.tab1 (or a child state) the active class will be applied to the li element.
<ul>
<li ui-sref-active='active'>
<a ui-sref="app.tab1">link</a>
</li>
<li ui-sref-active='active'>
<a ui-sref="app.tab2">link</a>
</li>
<li ui-sref-active='active'>
<a ui-sref="app.tab3">link</a>
</li>
</ul>
See http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active
You can use ng-class
Please read the documentation
来源：https://stackoverflow.com/questions/34758407/adding-or-removing-classes-based-on-route-changes-in-angular