角表達以ng級的CSS後評估被施加（後期綁定）

Question

我有一個ng-class其中類是動態加載，即評價在表達$rootscope，後期綁定是發生

<li role="presentation" style="width:200px" ng-class="{active: true, inactive: false}[{{vm.$rootScope.currentPage}}==1]"><a href="#/create">Create</a></li> 

這裏後{{vm.$rootScope.currentPage}}表達評估如果給1它是工作或如果我檢查檢查元素，我可以看到[1==1]即{{vm.$rootScope.currentPage}}這是返回正確的值，但類沒有得到應用

可以參考此Condition in ng- class not working

Answer 1

您應該使用[vm.$rootScope.currentPage===1]而不是[{{vm.$rootScope.currentPage}}==1]。沒有必要在[]

使用{{}}和需要改變

ng-class="{true: 'active', false:'inactive' }"代替ng-class="{'active': true , 'inactive':false }"

對於施加ng-class="{true: 'active', false:'inactive' }[vm.$rootScope.currentPage==1]"類方式

如果表情值真然後應用類活性

if表情值是假然後應用類非活動

所以使用：

<li role="presentation" style="width:200px" ng-class="{true: 'active', false:'inactive' }[vm.$rootScope.currentPage===1]"><a href="#/create">Create</a></li> 

還可以在ng-class使用三元運算符，如：ng-class="vm.currentPage===1? 'active': 'inactive'"

<li role="presentation" style="width:200px" ng-class="vm.currentPage===1? 'active': 'inactive'"> 
     <a href="#/create">Create</a> 
</li> 

PLUNKER DEMO

Answer 2

嘗試此 - ng-class="vm.$rootScope.currentPage==1?'active':'inactive'"。

您正在爲Angular添加多個額外的工作層，只是爲了進行簡單的真/假測試。最值得注意的是，ng指令中有{{ }}表達式。 AFAIK，所有這些都已經跟蹤你輸入的表情，並增加一個{{ }}只是增加了它需要觀看。

您也可以將其簡稱爲currentPage而不是vm.$rootScope.currentPage，但這取決於您是否已爲此設置任何組件的範圍。