离子混合应用程序 - 在满足某些条件时无法更改按钮的背景颜色

Question

我正在使用ionic来构建混合应用。我也在使用ionicons。我正在尝试在满足特定条件时更改按钮的背景颜色。

这有效：

<i class="icon ion-checkmark" ng-class="{active: item.status=='true'}"></i>

我可以更改图标本身的颜色。

然而，这不是：

 <ion-option-button class="button-energized" ng-click="foo(item)" ng-class="{back: item.status=='true'}"></ion-option-button>

我无法更改按钮的背景颜色，它会保持黄色。 我用过的CSS：

.active{
    color:red;
}

.back{
  background-color: green;
}

此fiddle中提供完整代码。

为了举例，“条件”只是一个交替的布尔值，一旦点击按钮就会改变。

编辑：
如果我按如下方式添加important，则此方法有效：

.back{
  background-color: green !important;
}

有没有更好或更正确的方法来实现这一目标？

Answer 1

据我所知（并且以同样的方式使用它），这非常好（通过使用!important CSS规则）。