angularjs - 如何在 AngularJS 中使用一个类或另一个类之间切换？

Question

我有以下代码：

<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>

我想根据我的 ui-router 状态更改 SVG 图标的颜色，如下所示：

• 如果状态包括“管理员”，我希望它使用类红色图标
• 如果状态不包括“管理员”，我希望它使用蓝色图标类

我以前做过这样的事情：

data-ng-class="{ current: $state.includes('admin') }"

但是我怎样才能让它在两种颜色之间切换呢？

Answer 1

这样的事情将是最简单的：

<i data-ng-class="{ 'red-icon': $state.includes('admin'), 'blue-icon': !$state.includes('admin') }"></i>

如果它变得比这更复杂，那么您可能希望从控制器方法返回一个对象、数组或字符串：

<i data-ng-class="iconStyle()"></i>

在控制器内部：

$scope.iconStyle = function (){
    return { 
        'red-icon': $state.includes('admin'), 
        'blue-icon': !$state.includes('admin') 
    }
}

或者

$scope.iconStyle = function (){
    if ($state.includes('admin')) {
        return 'red-icon';
    } else {
        return 'blue-icon';
    }
}