通過angualrjs動態更改html元素的類

Question

我試圖通過AngularJs的$scope值更改一些html元素的類屬性。但似乎我不能。

<div class="{{object.someAtrribute}} > Content </div> 

那麼，我該如何做到這一點呢？

謝謝。

Answer 1

您想使用ng-class指令。它需要一個對象與一組類名和布爾表達式：

<div ng-class="{'class-name': boolean}"></div> 

所以，在你的榜樣，你可以做這樣的事情：

<div ng-class="{'larger-than-content': item.foo > content}"></div> 

因爲這是一個對象，你可以添加幾類：

<div ng-class="{'one': foo == 1, 'two': foo == 2, 'three': foo == 3}"></div> 

注：在類名引號是沒有必要的，雖然我經常在我的類名破折號。在這種情況下，引號是必要的（您正在描述一個JS對象），所以我傾向於始終使用它們來保持一致性。