1. ホーム
  2. angularjs

[解決済み】現在のメニュー項目をハイライトする方法は?

2022-04-13 14:29:44

質問

AngularJSは、このように active クラスは現在のページのリンクにありますか?

何か魔法のような方法があるのだろうと想像しているのですが、見つからないようです。

私のメニューはこんな感じです。

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

で、ルートにそれぞれのコントローラを用意しています。 TasksControllerActionsController .

しかし、quot;active" クラスをこのクラスでバインドする方法がわかりません。 a のリンクは、コントローラへのリンクです。

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

解決方法は?

表示中

<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') でアクティブクラスを持つようになります。