現在のメニュー項目をハイライトするにはどうすればいいですか? 質問する

現在のメニュー項目をハイライトするにはどうすればいいですか? 質問する

activeAngularJS は、現在のページのリンクにクラスを設定する際に役立ちますか?

これを実現する魔法のような方法があると思うのですが、見つけることができません。

私のメニューは次のようになります:

 <ul>
   <li><a class="active" href="/tasks">Tasks</a>
   <li><a href="/actions">Tasks</a>
 </ul>

そして、ルートにはそれぞれに対するコントローラーがあります:TasksControllerおよびActionsController

aしかし、リンク上の「アクティブ」クラスをコントローラーにバインドする方法がわかりません。

何かヒントはありますか?

ベストアンサー1

展示中

<a ng-class="getClass('/tasks')" href="/tasks">Tasks</a>

コントローラーで

$scope.getClass = function (path) {
  return ($location.path().substr(0, path.length) === path) ? 'active' : '';
}

これにより、タスク リンクは '/tasks' で始まるすべての URL でアクティブ クラスを持つようになります (例: '/tasks/1/reports')

おすすめ記事