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

Question

我有以下代码：

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

我想根据我的ui-router状态改变SVG图标的颜色如下：

• 如果州包含'admin'，我希望它使用类red-icon
• 如果状态不包含'admin'，我希望它使用class blue-icon

之前我做过类似的事情：

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

但是如何让它在两种颜色之间切换？

Answer 1

这样的事情是最简单的：

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

如果它比那更复杂，那么你可能希望从控制器方法return an object, array or string：

<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';
    }
}