搜索

首页  >  问答  >  正文

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>

默认如下图:

点账号设置的时候 我希望当前状态在账号设置上 但是效果确是下面这样子的

路过的帮我看看是什么问题呗,先谢过啦~~~

为情所困为情所困2744 天前577

全部回复(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
  • 取消回复