AngularJS ng-class不应用css样式

Question

我有一个公司网站，我正在使用AngularJS开发，我遇到了ng-class

的麻烦

这是我的HTML：

<a href="timeEntry.php" ng-class="{{(userRole.admin) ? '' : 'inactive'}}">
    LINK
</a>

CSS：

.inactive {
    pointer-events : none;
    cursor         : default;
}

Chrome Inspect Element：

<a href="timeEntry.php" ng-class="inactive">
    LINK
</a>

显然我已经测试class="inactive"并且它正常工作，Chrome的视图来源似乎向我展示了一些应该正常工作但未应用的内容。

Answer 1

假设userRole.admin是一个布尔值，这应该可以工作

<a href="timeEntry.php" ng-class="{ inactive: !userRole.admin }">
    LINK
</a>

Answer 2

我认为这会奏效：

<a href="timeEntry.php" ng-class="{inactive:userRole.admin}">Link</a>

你也可以在对象中有多个条件，只需在它们之间加上逗号即可。格式为cssClass:<boolean expression>

Answer 3

ng-class需要一个表达式，所以在原始代码中，{{}}中的部分正在被评估，然后angular再次评估结果，试图将'inactive'解释为变量名。如果您想使用三元组，只需省略原始代码中的{{}}

即可

<a href="timeEntry.php" ng-class="userRole.admin ? '' : 'inactive'">
LINK

但是对于这个特定的例子，其他人使用对象格式提供的解决方案是首选。