☰

AngularJSでアクティブタブのスタイルを設定する 質問する

tag-icon • tag-icon javascript html angularjs
AngularJSでアクティブタブのスタイルを設定する 質問する

AngularJS で次のようにルートを設定しました:

$routeProvider
    .when('/dashboard', {templateUrl:'partials/dashboard', controller:widgetsController})
    .when('/lab', {templateUrl:'partials/lab', controller:widgetsController})

トップバーにタブとしてスタイル設定されたリンクがいくつかあります。現在のテンプレートまたは URL に応じて、タブに「アクティブ」クラスを追加するにはどうすればよいでしょうか?

ベストアンサー1

URL に頼らずにこれを解決する方法は、$routeProvider次のように構成中にすべての部分にカスタム属性を追加することです。

$routeProvider.
    when('/dashboard', {
        templateUrl: 'partials/dashboard.html',
        controller: widgetsController,
        activetab: 'dashboard'
    }).
    when('/lab', {
        templateUrl: 'partials/lab.html',
        controller: widgetsController,
        activetab: 'lab'
    });

$routeコントローラーで公開します:

function widgetsController($scope, $route) {
    $scope.$route = $route;
}

active現在アクティブなタブに基づいてクラスを設定します。

<li ng-class="{active: $route.current.activetab == 'dashboard'}"></li>
<li ng-class="{active: $route.current.activetab == 'lab'}"></li>

おすすめ記事