angular.js - angularjs標簽切換
問題描述
$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- ng-controller='PersonController'> <a ng-click='go(’peopleProfile’, ’peopleprofile’)'><i class='fa fa-cog'></i>個人設置</a></p><p ng- ng-controller='PersonController'> <a ng-click='go(’peopleSettings’, ’peoplesettings’)'><i class='fa fa-cog'></i>賬號設置</a></p>
默認如下圖： 
點賬號設置的時候 我希望當前狀態在賬號設置上 但是效果確是下面這樣子的
路過的幫我看看是什么問題唄，先謝過啦～～～
問題解答
回答1：推薦你使用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;}
希望可以幫到你。
回答2：<p ng-controller='PersonController'> <p ng-class='peopleprofile ? ’peoplesetting-nav-style’ : ’peoplesetting-nav’'><a ng-click='go(’peopleProfile’, ’peopleprofile’)'> <i class='fa fa-cog'></i>個人設置</a> </p> <p ng-class='peoplesettings ? ’peoplesetting-nav-style’ : ’peoplesetting-nav’'><a ng-click='go(’peopleSettings’, ’peoplesettings’)'> <i class='fa fa-cog'></i>賬號設置</a> </p></p>回答3：
樓主 ，能不能將你的完整的例子貼出來啊，小弟需要學習一下
相關文章：
1. windows - asp.net連接上mysql之后如何調用？比如下面的登錄驗證功能怎么實現2. css3 - Typecho 后臺部分表單按鈕在 Chrome 下出現靈異動畫問題，求解決3. javascript - 編程，算法的問題4. 剛放到服務器的項目出現這中錯誤，有高手指點嗎5. mysql - 面試題：如何把login_log表轉換成last_login表？6. javascript - 為什么嵌套的Promise不能按預期捕獲Exception？7. java - HTTPS雙向認證基礎上有無必要再進行加簽驗簽？8. apache - 想把之前寫的單機版 windows 軟件改成網絡版，讓每個用戶可以注冊并登錄。類似 qq 的登陸，怎么架設服務器呢？9. javascript - nodejs實現異步時遇到的一個問題10. java - 阿里的開發手冊中為什么禁用map來作為查詢的接受類?
網公網安備