1

ui-sref-active="active"選択したタグをアクティブにするために使用し<li>ていますが、3 つのリスト タグのうち、デフォルトでリスト タグをアクティブにしたいです。

<li ui-sref-active="active" class="item active"><a data-ng-click="search.status = ''" href="">ALL PROJECTS</a></li>
<li ui-sref-active="active"><a data-ng-click="search.status = 'PORTFOLIO'" href="">PORTFOLIO</a></li>
<li ui-sref-active="active"><a data-ng-click="search.status = 'CATEGORY'" href="">NOTIFICATIONS</a></li>

最初のリスト タグをデフォルトでアクティブにし、ユーザーが別のリスト タグをクリックすると、非アクティブ化してから別のリスト タグをアクティブ化する必要があります

私はこのディレクティブを使用しています: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

4

1 に答える 1

1

ng-class を使用して、クラス「アクティブ」のオンとオフを動的に切り替えることができます。

<li ui-sref-active="active" ng-class="{active: activeTab1}"><a data-ng-click="search.status = ''" href="">ALL PROJECTS</a></li>
<li ui-sref-active="active" ng-class="{active: activeTab2}"><a data-ng-click="search.status = 'PORTFOLIO'" href="">PORTFOLIO</a></li>
<li ui-sref-active="active" ng-class="{active: activeTab3}"><a data-ng-click="search.status = 'CATEGORY'" href="">NOTIFICATIONS</a></li>

コントローラーでは、ユーザーがクリックしたリスト タグに基づいて、activeTab1、2、および 3 のオンとオフを切り替えることができます。デフォルトで activeTab1 を true に設定できます。

更新しました

構文のために ng-class に {} を追加しました

これはPlunkerでの実際の例です

于 2016-06-08T08:05:39.883 に答える