我正在使用angularJS創建菜單。我需要添加或刪除類,而點擊如下圖所示如何使用如果否則在ng類中的條件
<a href="#" ng-click="active='home'"> <i class="fa fa-home {active === 'home' ? 'fa-spin': ''}" ></i> Home </a>
我的代碼,我需要根據活動的價值添加和刪除類(FA-旋轉)。但上面的代碼不起作用。
我正在使用angularJS創建菜單。我需要添加或刪除類,而點擊如下圖所示如何使用如果否則在ng類中的條件
<a href="#" ng-click="active='home'"> <i class="fa fa-home {active === 'home' ? 'fa-spin': ''}" ></i> Home </a>
我的代碼,我需要根據活動的價值添加和刪除類(FA-旋轉)。但上面的代碼不起作用。
下面是正確的語法:
<a href="#" ng-click="active='home'"> <i class="fa fa-home" ng-class="{'fa-spin':active=='home'}"></i> Home </a>
建議
更好地使用UI路由器代替手工製作菜單。 UI路由器具有指令像ui-sref-active
它會自動添加active
類活動的菜單和菜單項
使用ngClass的其餘部分刪除(見文檔:https://docs.angularjs.org/api/ng/directive/ngClass)
爲NG-類指令一般語法如下:
ng-class="{'class1': condition, 'class2':condition, ...'classn':condition}"
因此,你的代碼應該是這樣的:
<a href="#" ng-click="active='home'"> <i class="fa fa-home" ng-class="{'fa-spin': active === 'home'}" ></i> Home </a>
<i ng-class="{'fa-spin': active === 'home'}" class="fa fa-home"></i>
首先初始化active= true
然後在ng-click
上更改其值。
試試這個
<a href="" ng-init="active='true'" ng-click="active=!active" ng-class="active ? 'fa-home' : 'fa-spin'"></a>
試試這個:
[ngClass]= "[active == 'home' ? 'fa-spin' : '']"
雖然這個代碼片斷是值得歡迎的,並可以提供一些幫助,這將是[大大改善,如果它包含一個解釋(// meta.stackexchange.com/q/114762)*如何解決問題。沒有這些,你的答案就沒有什麼教育價值了 - 記住,你正在爲將來的讀者回答這個問題,而不僅僅是現在問的人!請編輯您的答案以添加解釋,並指出適用的限制和假設。 –