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