angularjs - 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;
}

铬检查元素：

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

显然我已经测试过class="inactive"并且它正在正常工作，Chrome 的视图源似乎向我展示了一些应该工作但没有被应用的东西。

score 5 · Accepted Answer

假设 userRole.admin 是一个布尔值，这应该有效

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

score 1 · Accepted Answer

我认为这会起作用：

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

您还可以在对象中有多个条件，只需在它们之间放置逗号。格式是cssClass:<boolean expression>

score 1 · Accepted Answer

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

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

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

3 回答 3