简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
angular.js - angularjs标签切换
为情所困
为情所困 2017-05-15 16:54:49
0
3
550
 $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>

默认如下图：

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

路过的帮我看看是什么问题呗，先谢过啦～～～

为情所困
为情所困

répondre à tous(3)
習慣沉默
習慣沉默2017-05-15 16:56:49 3 plancher

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.

Comme +0
Ajouter une réponse
巴扎黑
巴扎黑2017-05-15 16:56:49 2 plancher 
<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>
Comme +0
Ajouter une réponse
Ty80
Ty802017-05-15 16:56:49 1 plancher

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

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！