$scope.peopleprofile = true;
$scope.peoplesettings = false;
if( $scope.locationpath == '/peopleProfile'){
$scope.peopleprofile = true;
$scope.peoplesettings = false;
}else if( $scope.locationpath == '/peopleSettings'){
$scope.peoplesettings = true;
$scope.peopleprofile = false;
}
$scope.go = function(url, type){
if( type == 'peopleprofile'){
$scope.peopleprofile = true;
$scope.peoplesettings = false;
}else if( type == 'peoplesettings'){
$scope.peoplesettings = true;
$scope.peopleprofile = false;
}
routeSrvc.go(url);
};
<p ng-class="{true: 'menu-item peoplesetting-nav-style', false: 'menu-item peoplesetting-nav'}[peopleprofile]" ng-controller="PersonController">
<a class="peoplesetting-title-style" ng-click="go('peopleProfile', 'peopleprofile')"><i class="fa fa-cog"></i>個(gè)人設(shè)置</a>
</p>
<p ng-class="{true: 'menu-item peoplesetting-nav-style', false: 'menu-item peoplesetting-nav'}[peoplesettings]" ng-controller="PersonController">
<a class="peoplesetting-title-style" ng-click="go('peopleSettings', 'peoplesettings')"><i class="fa fa-cog"></i>賬號(hào)設(shè)置</a>
</p>
The default is as shown below:
When I click on the account settings, I hope that the current status is in the account settings, but the effect is indeed as follows
Anyone passing by can help me find out what the problem is. Thanks in advance~~~
Recommend you to use itangular
的ui-router
, it is very convenient and very powerful; I will see if I have time and write a small demo for you.
Added:
I took the time to write a demo for you
HTML file code is as follows:
<body ng-app="MyApp" ng-controller="MyController as vm">
<h1>A demo of ui-router</h1>
<ul class="menu">
<li class="item">
<a ui-sref="personal-setting" ui-sref-active="item-active">個(gè)人設(shè)置</a>
</li>
<li class="item">
<a ui-sref="account-setting" ui-sref-active="item-active">賬號(hào)設(shè)置</a>
</li>
<li class="item">
<a ui-sref="hello-setting" ui-sref-active="item-active">隨便看看</a>
</li>
</ul>
<hr/>
<p ui-view>初始化狀態(tài)...</p>
</body>
The JS file code is as follows:
(function(){
angular.module('MyApp', [
'ui.router',
'ngAnimate'
])
.config(config)
.controller('MyController', MyController);
config.$inject = ['$stateProvider', '$urlRouterProvider'];
MyController.$inject = [];
function config($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('setting/default');
$stateProvider
.state('account-setting',
{
url: 'setting/account',
templateUrl: 'template/account-setting.html'
})
.state('personal-setting',
{
url: 'setting/personal',
templateUrl: 'template/personal-setting.html'
})
.state('hello-setting',
{
url: 'setting/hello',
templateUrl: 'template/hello-setting.html'
})
.state('default-setting',
{
url: 'setting/default',
templateUrl: 'template/default-setting.html'
})
}
function MyController(){
var vm = this;
}
})();
The CSS file code is as follows:
h1{
text-align: center;
}
.menu{
list-style: none;
}
.menu .item{
display: block;
width: 80px;
height: 30px;
margin-top: 2px;
}
.menu .item a{
display: block;
width: 80px;
height: 30px;
background-color: black;
color: red;
text-decoration: none;
text-align: center;
line-height: 30px;
}
.item-active{
background-color: red !important;
color: black !important;
}
Hope this helps.
<p ng-controller="PersonController">
<p class="menu-item" ng-class="peopleprofile ? 'peoplesetting-nav-style' : 'peoplesetting-nav'">
<a class="peoplesetting-title-style" ng-click="go('peopleProfile', 'peopleprofile')">
<i class="fa fa-cog"></i>個(gè)人設(shè)置
</a>
</p>
<p class="menu-item" ng-class="peoplesettings ? 'peoplesetting-nav-style' : 'peoplesetting-nav'">
<a class="peoplesetting-title-style" ng-click="go('peopleSettings', 'peoplesettings')">
<i class="fa fa-cog"></i>賬號(hào)設(shè)置
</a>
</p>
</p>