recherche

Maison  >  Questions et réponses  >  le corps du texte

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 Il y a quelques jours574

répondre à tous(3)je répondrai

  • 習慣沉默

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

    Il est recommandé d'utiliser angular de ui-router, qui est très pratique et très puissant. Je vais voir si j'ai le temps et écrire une petite démo pour vous.

    Supplément :

    J'ai pris le temps d'écrire une démo pour vous

    Le code du fichier HTML est le suivant : 

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

    Le code du fichier JS est le suivant : 

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

})();

    Le code du fichier CSS est le suivant : 

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

    J'espère que cela vous aidera.

    répondre
    0
  • 巴扎黑

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

    <p ng-controller="PersonController">
    <p class="menu-item" ng-class="peopleprofile ? 'peoplesetting-nav-style' : 'peoplesetting-nav'">
        <a class="peoplesetting-title-style" ng-click="go('peopleProfile', 'peopleprofile')">
            <i class="fa fa-cog"></i>个人设置
        </a>
    </p>
    <p class="menu-item" ng-class="peoplesettings ? 'peoplesetting-nav-style' : 'peoplesetting-nav'">
        <a class="peoplesetting-title-style" ng-click="go('peopleSettings', 'peoplesettings')">
            <i class="fa fa-cog"></i>账号设置
        </a>
    </p>
</p>

    répondre
    0
  • PHP中文网

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

    Propriétaire, pouvez-vous publier votre exemple complet ? J'ai besoin d'en tirer des leçons

    répondre
    0
  • Annulerrépondre