masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
angular.js - penukaran tab angularjs
为情所困
为情所困 2017-05-15 16:54:49
0
3
613
 $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~~~

为情所困
为情所困

membalas semua(3)
習慣沉默
習慣沉默2017-05-15 16:56:49 Tingkat 3

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.

Suka +0
Tambah Balasan
巴扎黑
巴扎黑2017-05-15 16:56:49 Tingkat 2 
<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>
Suka +0
Tambah Balasan
Ty80
Ty802017-05-15 16:56:49 Tingkat 1

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

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan