Question

我正在使用REST API获取数据，其中一个返回的属性可以是3个选项中的任何一个;

选项是;消极，警告，成功。

我想根据返回的值使用class设置ng-class;

我能做到这一点，但仅限于一个; 代码如下;

<div class="alert" ng-class="restaurantNotice(restaurant[0].notice)" ng-if="restaurant[0].notice.length">
    <div class="alert-inner inner-large" ng-bind="restaurant[0].notice"></div>
</div>

$scope.restaurantNotice = function(a) {
    return (a = Negative) ? 'negative' : '';
};

如您所见，如果a = Negative然后应用class negative，则不会应用任何内容。

现在我想检查所有三个选项并分别应用3个不同的类

Answer 1

使用对象

代替ng-class中的函数

'x'

Answer 2

这样：

<p ng-class="{a: deleted, b: important, c: error}">Example</p>

如果a为true，则应用已删除的类，依此类推。

Answer 3

你可以尝试

<div class="alert" ng-class="{'negative' : restaurant[0].notice.length, 'warning' : restaurant[1].notice.length, 'success' : restaurant[2].notice.length}">
    <div class="alert-inner inner-large" ng-bind="restaurant[0].notice"></div>
</div>

Adding multiple class using ng-class

的副本

Answer 4

如果您要将相同的通知类型（负面，警告，成功）设置为类，则只需转换为小写并从函数返回而不是放置条件。

$scope.restaurantNotice = function(a) {
    return a.toLowerCase();
};

OR

<div class="alert" class="{{restaurant[0].notice | lowercase}}" ng-if="restaurant[0].notice.length">

ng-class有多个选项

4 个答案: