cari

Rumah  >  Soal Jawab  >  teks badan

angular.js - penukaran tab 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>

Lalainya adalah seperti yang ditunjukkan di bawah:

Bila saya klik pada tetapan akaun, saya harap status semasa ada dalam tetapan akaun, tetapi kesannya memang seperti berikut

Sesiapa yang lalu lalang boleh membantu saya mengetahui apa masalahnya. Terima kasih terlebih dahulu~~~

为情所困为情所困2784 hari yang lalu617

membalas semua(3)saya akan balas

  • 習慣沉默

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

    Anda disyorkan agar menggunakan angular ui-router, yang sangat mudah dan sangat berkuasa. Saya akan lihat jika saya mempunyai masa dan menulis demo kecil untuk anda.

    Tambahan:

    Saya meluangkan masa untuk menulis demo untuk anda

    Kod fail HTML adalah seperti berikut: 

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

    Kod fail JS adalah seperti berikut: 

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

})();

    Kod fail CSS adalah seperti berikut: 

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

    Semoga ini membantu.

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

    balas
    0
  • PHP中文网

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

    Pemilik, bolehkah anda menyiarkan contoh lengkap anda? Saya perlu belajar daripadanya

    balas
    0
  • Batalbalas