$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>个人设置</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>账号设置</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~~~
習慣沉默2017-05-15 16:56:49
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">个人设置</a>
</li>
<li class="item">
<a ui-sref="account-setting" ui-sref-active="item-active">账号设置</a>
</li>
<li class="item">
<a ui-sref="hello-setting" ui-sref-active="item-active">随便看看</a>
</li>
</ul>
<hr/>
<p ui-view>初始化状态...</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.
巴扎黑2017-05-15 16:56:49
<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>个人设置
</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>账号设置
</a>
</p>
</p>