angular.js - angularjs標籤切換-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

angular.js - angularjs標籤切換

为情所困 2017-05-15 16:54:49

517

$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); };

 个人设置 
  账号设置

預設如下圖：

點帳號設定的時候我希望目前狀態在帳號設定上但是效果確是下面這樣子的

路過的幫我看看是什麼問題唄，先謝謝啦～～～

为情所困

全部回覆 (3)

習慣沉默2017-05-15 16:56:49 3樓

推薦你使用angular的ui-router，很方便，而且更能十分強大；我看看有沒有時間，幫你寫個小demo。

補充：

抽空幫你寫的一個demo

HTML檔程式碼如下：

 A demo of ui-router
   个人设置 
  账号设置 
  随便看看 
 
 
 初始化状态...

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; }

希望可以幫助你。