4

アプリで次のようなナビゲーション メニューを表示したいだけです。

<ul>
  <li><a href="#/section1">Section 1</a></li>

  <li class="active"><a href="#/section2">Section 2</a></li>

  <li><a href="#/section3">Section 3</a></li>
</ul>

ここで、セクション 1、セクション 2、またはセクション 3 をクリックすると、それぞれルート変更がトリガーされます。現在、<li>セクション 2 にはactive、現在アクティブなルートを意味するクラスがあります。このクラスを移動したいだけです。たとえば、セクション 3 をクリックした場合、liセクション 3 にactiveクラスを配置します。

これを達成するための最良の方法は何ですか？

4

3 に答える 3

10

$routeChangeSuccess イベント ( $routeのドキュメントを参照) をリッスンして、変更を検出できます。

コントローラーと html を次のように再フォーマットします。

$scope.navList = [
  { url: '/route1', title: 'Route 1'},
  { url: '/route2', title: 'Route 2'},
  { url: '/route3', title: 'Route 3'}
];

<ul>
  <li ng-repeat="item in navList">
    <a ng-class="{active:item.active}" href="#{{item.url}}">{{item.title}}</a>
  </li>
</ul>

そして、（コントローラーで）変更をリッスンします。

function detectRoute() {
  angular.forEach($scope.navList, function(item) {
    item.active = $location.path().match(new RegExp(item.url)) ? true : false;
  });  
}

$scope.$on('$routeChangeSuccess', detectRoute);

Plunkerの例を参照してください。

これをモジュールにまとめました: https://github.com/Espesen/angular-simple-navbar

于 2013-08-03T06:17:14.800 に答える
0

ブートストラップを使用してこれを達成しました。

$('ul.nav > li').click(function (e) {
        e.preventDefault();
        $('ul.nav > li').removeClass('active');
        $(this).addClass('active');                
    });

作業用フィドルはこちら

于 2013-08-03T05:58:21.903 に答える