23

我试图找出根据角度值添加类的良好语法。我想使用 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}"

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

4

5 回答 5

37

尝试这个。

<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>

不需要括号。

于 2015-07-06T05:20:23.007 回答
9

一旦你必须在后面添加一些逻辑，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
    };
};

好旧的 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';
    }
};
于 2015-07-20T14:24:59.090 回答
4

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为 true 或fav===myfav.id返回 true 时应用。

因此，如果单击一次后，假设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-oclass 具有更高的优先级，则将其放在fa-starCSS 的下方，例如

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

请参阅http://plnkr.co/edit/Dh59KUU41uWpIkHIaYrO?p=preview上的工作演示

于 2015-07-14T19:31:13.957 回答
2

您可以将表达式与 ng-class 一起使用

  <i class="fa orange" ng-class="favorite || fav == myfav.id ? 'fav' : 'no-fav'"></i>
于 2015-07-19T16:05:23.823 回答
0

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

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>
于 2019-12-13T08:57:17.653 回答