Angular ng-class 与 class

Question

我在这里发现了类似的问题，但不是这个及其最简单的用例：在同一元素上使用 class 和 ng-class。

我有一个使用 ng-repeat 生成的 UL。 LI 使用 .item class 进行样式设置，如果所选 LI 是当前选择的 LI（用户），则所选 LI 将使用 ng-class 动态添加 .active class。

如果我只使用 ng-class，它就可以工作。但是，当我想添加一个标准 class 时，它不会。

怎么了？非常感谢---

这有效，所选 LI 获得 .active class。

<li ng-repeat="user in mainList.users" ng-class="{'active':isCurrentUser(user)}">

这行不通：

<li ng-repeat="user in mainList.users" class="item" ng-class="{'active':isCurrentUser(user)}">

Answer 1

我猜你正在使用 class 和 ng-class 覆盖 class。你能把 item: true 放在 ng-class 中作为解决这个问题的方法吗？

Answer 2

嗯，总有一个解决方法 :D :

<li  ng-repeat="user in mainList.users" ng-class="{'item' : true, 'active': isCurrentUser(user)}">
   {{user}}
</li>

我不确定您在 ng-class 中调用 classes 时是否应该有这些引文，但如果其中一个有效，请检查另一个。希望这对您有所帮助！

Answer 3

试试这个，我已经测试过并且有效。

<li ng-repeat="user in mainList.users" class="item ng-class:{'active':isCurrentUser(user)}">

Answer 4

如果我没记错的话，你可以这样做:

<li class="item" ng-repeat="user in mainList.users" ng-class="{'active':isCurrentUser(user)}">

class 应该是第一个。如果您在两个 class 中没有相同的属性，它将起作用。

此外，如果它不起作用，您可以尝试这样做：

<!-- add the text-error class if wrong is true -->
<div class="item ng-class:{ 'text-error': wrong };">Stuff Goes Here</div>

如果您仍有问题，我建议您访问此博客： The Many Ways To Use ng-class

尽情享受吧！

Angular ng-class with class