通过angularjs动态更改html元素的类

Question

我正在尝试通过AngularJs的$scope值更改某些html元素的class属性。但似乎我不能。

<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对象），因此我倾向于始终使用它们以保持一致性。