根据角路由变化添加或移除类 [英] adding or removing classes based on route changes in angular
本文介绍了根据角路由变化添加或移除类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
![在这里输入的形象描述](\"http://i.stack.imgur.com/wGIl5.jpg\")
我有一个包含3种形式3条路线
我试着总部设在angular.I使用角路由模块当前路线上设置当前选项卡中引导活动类。
我怎样才能做到这一点。
我米的附加JS code请检查和帮助，请
angular.module（'bankAppOnline'，['ngSanitize'，'ngRoute'，'ngAnimate'，'ngQuantum']）
的.config（['$ routeProvider'，
功能（$ routeProvider）{
$ routeProvider。
当（'/ firststep'，{
templateUrl：'模板/ firstformtemplate.html'，
控制器：'firstformCtrl'，
containerClass：主动 }）。
当（'/ secondstep'，{
templateUrl：'模板/ secondformtemplate.html'，
控制器：'secondformCtrl'，
containerClass：主动
}）。
当（'/ thirdstep'，{
templateUrl：'模板/ thirdformtemplate.html'，
控制器：'thirdformCtrl'，
containerClass：主动 }）。
除此以外（{
redirectTo：'/ firststep
}）;
}]）
.RUN（函数（$ rootScope）{ $ rootScope。在$（'$ stateChangeSuccess'，函数（事件，toState，toParams，fromState，fromParams）{
的console.log（事件）;
的console.log（toState）;
的console.log（fromState）;
的console.log（toParams）;
$ rootScope.containerClass = toState.containerClass;
}）; }）
.controller（'主Ctrl键，功能（$范围内）
{
$ scope.containerClass =主动;
}）
.controller（'firstformCtrl'，函数（$范围，客户）{ $ scope.cities = ['Hyderabad','Vizag','Vijayawada','Bangalore','Delhi','Mumbai','Chennai','Noida','Pune','Tirupathi'];
$ scope.professions = ['博士'，'老师'，'工程师'，'律师'];
$ scope.customer = Customer.get（）;
$ scope.reset =功能（）{
。$ scope.firstform $ setPristine（）;
VAR恢复= {
名字： ，
姓： ，
时代：，
城市：，
专业：，
手机：
};
angular.extend（$ scope.customer，恢复）; }
}）
.controller（'secondformCtrl'，函数（$范围，客户）{
$ scope.designations = ['ChairmanVice主席'，
主席兼董事总经理'，
'常务董事'，
老副president'，
副president'，
'总经理'，
联合总经理，
副总经理，
助理。总经理'，
总行政经理'，
老经理'，
'经理'，
联合管理，
'副总经理'，
助理。经理'，
老官'，
'官'，
小官'，
老关联'，
'关联'，
小关联'，
'助理'];
$ scope.customer = Customer.get（）;
$ scope.reset =功能（）{ 。$ scope.secondform $ setPristine（）;
VAR恢复= {
泛：，
收入：，
公司：，
指定：，
地址：，
销：
};
angular.extend（$ scope.customer，恢复）; }
}）
.controller（'thirdformCtrl'，函数（$范围，$ HTTP，客户，$警报）{ $ scope.accounts = ['储蓄'，'基本检查，付息，以市场为存款，存款证'];
$ scope.customer = Customer.get（）;
$ scope.reset =功能（）{
。$ scope.thirdform $ setPristine（）;
VAR恢复= {
帐户类型： ，
fdCheck：假的，
creditcardCheck：假的
};
angular.extend（$ scope.customer，恢复）; };
$ scope.sendPost =功能（）{
VAR数据= $ scope.customer;
的console.log（$ scope.customer）;
$ http.post（/用户数据）.success（功能（数据，状态）{
$ scope.status =状态; $警报（'形式保存成功。'，'OLEY！'，'成功'，'右上角'）; 的console.log（$ scope.status）;
}）
.error（功能（响应状态）{
// $警报（选项）
//使用更多选项创建对象
$警报（{标题：错误，内容：发生错误，摆放位置：右上，警告类型：危险}）;
}）
}; }）
.factory（客户，函数（）{
VAR的客户= {
名字： ，
姓： ，
时代：，
城市：，
专业：，
手机：，
帐户类型： ，
fdCheck：假的，
creditcardCheck：假的，
泛：，
收入：，
公司：，
指定： ，
地址： ，
针：
}; 返回{
得到：函数（）{
回报客户;
}
}
}）;
解决方案
这可以通过使用纳克级的实现。只要在你的控制器使用$位置。这个例子很简单。在这里，我们添加活动类的div当$ location.path（）等于'/'.
然后我们设置一个条件纳克级在我们看来，增加了活动类。
查看
＆LT; DIV纳克级={活跃：位置==='/'}＆GT;
＆LT; P＆gt;在父DIV将活动类添加时的位置路径等于'/'＆LT; / P＆GT;
＆LT; / DIV＆GT;
控制器
.controller（'MainCtrl'，函数（$范围，$ rootScope，$位置）{
$ scope.location = $ location.path（）;
$ rootScope。在$（'$ routeChangeSuccess'，函数（）{
$ scope.location = $ location.path（）;
}）;
}）;
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();
});
});
这篇关于根据角路由变化添加或移除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
