$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>
預設如下圖:
點帳號設定的時候 我希望目前狀態在帳號設定上 但是效果確是下面這樣子的
路過的幫我看看是什麼問題唄,先謝謝啦~~~
習慣沉默2017-05-15 16:56:49
推薦你使用angular
的ui-router
,很方便,而且更能十分強大;我看看有沒有時間,幫你寫個小demo。
補充:
抽空幫你寫的一個demo
HTML檔程式碼如下:
<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>
JS檔案代碼如下:
(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;
}
})();
CSS檔案代碼如下:
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;
}
希望可以幫助你。