recherche

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

angulaire.js - changement d'onglet angulairejs

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

La valeur par défaut est la suivante :

Quand je clique sur les paramètres du compte, j'espère que l'état actuel est dans les paramètres du compte, mais l'effet est bel et bien le suivant

Tous les passants peuvent m'aider à découvrir quel est le problème. Merci d'avance~~~

为情所困为情所困2784 Il y a quelques jours616

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