web-dev-qa-db-ja.com

状態に基づいてAngularのngクラスを条件付きで設定します

アプリケーションの状態に基づいて（AngularUIルーターを使用して）要素のクラスを条件付きで設定したいと思います。私はこれを試しましたが、機能していません：

<li ng-class="{active: $state.current.name === 'state1'}">State 1</li>
<li ng-class="{active: $state.current.name === 'state2'}">State 2</li>

何か案は？

angularjsangular-ui-routerng-class
12
tronman

それが機能しなかった理由は、@ charlietflが指摘したように、$ stateがスコープ内になかったためです。そこで、州のコントローラーに以下を追加しました。

$rootScope.$state = $state;

そしてそれはうまくいきました。 このプランカー は実用的な例です。

8
tronman

ui-sref-activeディレクティブを使用することもできます。

ui-routerの状態が一致するときにクラスactiveを要素に追加するにはuse

ui-sref-active="active"

参照： http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

28
craigb

あなたはこのようなことをすることができます：

<li ng-class="{active: $state.includes('state1')}">State 1</li>
<li ng-class="{active: $state.includes('state2')}">State 2</li>
6
V31