搜尋

首頁  >  問答  >  主體

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

預設如下圖:

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

路過的幫我看看是什麼問題唄,先謝謝啦~~~

为情所困为情所困2784 天前615

全部回覆(3)我來回復

  • 習慣沉默

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

    推薦你使用angularui-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;
    }
    

    希望可以幫助你。

    回覆
    0
  • 巴扎黑

    巴扎黑2017-05-15 16:56:49

    雷雷

    回覆
    0
  • PHP中文网

    PHP中文网2017-05-15 16:56:49

    樓主 ,能不能將你的完整的例子貼出來啊,小弟需要學習一下

    回覆
    0
  • 取消回覆