带有 OR 运算符的 AngularJS ng-class 多个条件答案

【问题标题】：AngularJS ng-class multiple conditions with OR operator带有 OR 运算符的 AngularJS ng-class 多个条件
【发布时间】：2014-08-08 21:03:25
【问题描述】：

我尝试找出根据角度值添加类的良好语法。我想用 OR 运算符激活一个关于 2 个条件的类（一个关于实时用户更改，一个关于加载数据）。

这是行：

 <a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
    <i class="fa orange" ng-class="{'fa-star': (favorite || (fav==myfav.id)), 'fa-star-o': !favorite}"></i>
 </a>

我尝试了一些不同的代码，例如：

 ng-class="{'fa-star': favorite, 'fa-star': (fav==myfav.id), 'fa-star-o': !favorite}"

没有任何成功。有人可以帮我找到好的语法吗？

【问题讨论】：

应该是{'fa-star': favorite || fav == myfav.id, 'fa-star-o': !favorite}。请参阅此plunkr 中的类似示例。我尝试用ng-class="{'has-error': ctrl.submitted && 1 == 1} 替换该代码，它可以工作。
Parens 应该也能正常工作。如果我更改您的 Plunkr 代码并将它们添加到您的 AND 表达式中，一切仍然有效。我想 OP 的代码还有其他问题。
是的，这是我的第一个代码，但它似乎不适用于该类。我在外面测试了fav == myfav.id，它应该返回“true”。
哦。是否与逻辑有关：如果!favorite 但fav==myfav.id 结果将是fa-star fa-star-o 然后最后一个应用并且视觉上不会更改图标。所以我不确定我的“开关”在这种情况下是否有效

标签： angularjs conditional ng-class

【解决方案1】：

试试这个。

<a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
 <i class="fa orange" ng-class="{'fa-star': favorite || fav==myfav.id, 'fa-star-o': !favorite}"></i>

不需要括号。

【讨论】：

这不能按预期工作。当一个模型被更新时，替代条件似乎被忽略了。
@isherwood 你的意思是，当变量 favourite = false 和 fav == myFav.id 时？这将导致添加两个类“fa-star”和“fa-star-o”。
问题在于 OR 运算符，而不是第二类。当其中一个条件发生变化时，它会覆盖另一个条件。
@isherwood by override ，你到底是什么意思，你能详细说明一下。此外，如果你能说出你想要什么应该发生而它没有发生，这将清除我们所做的任何错误假设
不幸的是，我无法重现我看到的问题。我可能不得不撤回。

【解决方案2】：

HTML 将保持不变

<a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
    <i ng-class="{'fa-star-o':!favorite,'fa-star':favorite||fav===myfav.id}"></i>
</a>

但是类在 CSS 文件中的顺序很重要

fa-star 类将在favorite 为真或fav===myfav.id 返回真时应用。

因此，如果单击一次后，假设fav===myfav.id返回true并继续返回true，即使再次单击，那么类fa-star将从此应用。

如果默认favorite为false，那么fa-star-o将在第一次加载模板时应用，但在第一次点击后，当favorite设置为true时，它将被删除。然后在第二次单击时，当favorite 再次设置为 false 时，fa-star-o 将被应用，但在这种情况下，fa-star 类也将被应用，因为fa===myfav.id 条件仍将返回 true（假设这是案例）。

因此，您需要确定需要应用哪个类的优先级，以确定它何时出现在元素上，因为当两个类可以同时出现在元素上时，可能会出现这种情况。例如，如果 fa-star-o 类具有更高的优先级，则将其放在 CSS 中的 fa-star 下方，例如

.fa-star {
  border: 1px solid #F00;
}
.fa-star-o {
  border: 1px solid #000;
}

在http://plnkr.co/edit/Dh59KUU41uWpIkHIaYrO?p=preview查看工作演示

【讨论】：

【解决方案3】：

你可以在 ng-class 中使用表达式

  <i class="fa orange" ng-class="favorite || fav == myfav.id ? 'fav' : 'no-fav'"></i>

【讨论】：

【解决方案4】：

一旦您必须在ng-class 后面添加一些逻辑，最好还是坚持使用控制器来执行此操作。您可以通过以下两种方式来实现：JSON 语法（与您的 HTML 相同，只是更具可读性）或显然是 JavaScript。

HTML (JSON) 语法

HTML

<i ng-class="getFavClassIcon(myFav.id)"></i>

JS

$scope.getFavClassIcon= function (favId) {
    return {
        'fa-star-o' : !$scope.favorite,
        'fa-star'   : $scope.favorite || $scope.fav === favId
    };
};

Good Old IF 语句 (JavaScript)

HTML

<i ng-class="getFavClassIcon(myFav.id)"></i>

JS

$scope.getFavClassIcon= function (favId) {
    if (!$scope.favorite) {
        return 'fa-star-o';
    } else if ($scope.favorite) { // obviously you can use OR operator here
        return 'fa-star';
    } else if ($scope.fav === favId) {
        return 'fa-star';
    }
};

【讨论】：

老式的 if 是最好的，特别是如果多个变量影响类名
这是一个绝妙的方法 - 足够简单，任何人都可以拿起并理解。谢谢。

【解决方案5】：

例如：在我的场景中，我需要在某些情况下应用大写类，而在某些情况下我不需要应用该大写类。

inputTextCapitalSmall(assetId) {
    return {
      'uppercase': assetId !== 'TELEKURS' && assetId !== 'REUTERS' && assetId !== 'S&P',
    };
  }

<form [formGroup]="querySearchForm" >
  <input autocomplete="off" matInput id="assetIdTypeValue" [ngClass]="inputTextCapitalSmall(querySearchForm.value.assetIdType)" >
</form>

【讨论】：