Question

我正在尝试根据状态设置不同的类，如何根据不同的条件设置不同的类？

<i ng-class="'iconA': state == 100, 'iconB': state == 200, 'iconC': state == 300"></i>

Answer 1

我想你可能只是在双引号内丢失了一些大括号 - 你试试这个吗？

<button class="date-picker__day" ng-class="{
  'date-picker__day--this-month': ctrl.isActiveMonthForDay(day),
  'is-selected': ctrl.isSelectedDay(day),
  'is-active': ctrl.isActiveDay(day),
  'is-today': ctrl.isToday(day),
  'is-disabled': !ctrl.isDateAllowed(day),
}"></button>

我们最近做了一些非常类似的事情，对我们来说效果很好：

var propertyTypes = [
    {key:'OFFICE', value:false},
    {key:'RESIDENTIAL', value:false},
    {key:'RETAIL', value:false},
    {key:'INDUSTRIAL', value:false},
    {key:'HOTEL', value:false}
];

var property_types = [
    {
        "type": "OFFICE"
    },
    {
        "type": "RETAIL"
    }
];

for (var i = 0; i < property_types.length; i++) {
    var key = property_types[i].type;
    for (var j = 0; j < propertyTypes.length; j++) {
        if (propertyTypes[j].key === key) {
            propertyTypes[j].value = true;
        }
    }
}

console.log(propertyTypes);
/* returns
[ { key: 'OFFICE', value: true },
  { key: 'RESIDENTIAL', value: false },
  { key: 'RETAIL', value: true },
  { key: 'INDUSTRIAL', value: false },
  { key: 'HOTEL', value: false } ]
*/

Answer 2

来自Angular docs for ngClass：

评估结果可以是一个字符串，表示空格分隔的类名，数组或类名到布尔值的映射。对于地图，其值为真值的属性的名称将作为css类添加到元素中。

你已经拥有的是靠近地图的。你只需要把它包在大括号里。

<i ng-class="{'iconA': state == 100, 'iconB': state == 200, 'iconC': state == 300}"></i>

具有关联类的angular多个布尔条件

2 个答案: