2017-05-09 40 views
0

我正在使用angularJS創建菜單。我需要添加或刪除類,而點擊如下圖所示如何使用如果否則在ng類中的條件

<a href="#" ng-click="active='home'">&nbsp;<i class="fa fa-home {active === 'home' ? 'fa-spin': ''}" ></i> Home </a> 

我的代碼,我需要根據活動的價值添加和刪除類(FA-旋轉)。但上面的代碼不起作用。

回答

1

下面是正確的語法:

<a href="#" ng-click="active='home'">&nbsp;<i class="fa fa-home" ng-class="{'fa-spin':active=='home'}"></i> Home </a> 

建議

更好地使用UI路由器代替手工製作菜單。 UI路由器具有指令像ui-sref-active它會自動添加active類活動的菜單和菜單項

0

使用ngClass的其餘部分刪除(見文檔:https://docs.angularjs.org/api/ng/directive/ngClass

爲NG-類指令一般語法如下:

ng-class="{'class1': condition, 'class2':condition, ...'classn':condition}" 

因此,你的代碼應該是這樣的:

<a href="#" ng-click="active='home'">&nbsp;<i class="fa fa-home" ng-class="{'fa-spin': active === 'home'}" ></i> Home </a> 
0
<i ng-class="{'fa-spin': active === 'home'}" class="fa fa-home"></i> 
+0

雖然這個代碼片斷是值得歡迎的,並可以提供一些幫助,這將是[大大改善,如果它包含一個解釋(// meta.stackexchange.com/q/114762)*如何解決問題。沒有這些,你的答案就沒有什麼教育價值了 - 記住,你正在爲將來的讀者回答這個問題,而不僅僅是現在問的人!請編輯您的答案以添加解釋,並指出適用的限制和假設。 –

0

首先初始化active= true然後在ng-click上更改其值。

試試這個

<a href="" ng-init="active='true'" ng-click="active=!active" ng-class="active ? 'fa-home' : 'fa-spin'"></a> 
1

試試這個:

[ngClass]= "[active == 'home' ? 'fa-spin' : '']" 
相關問題