Как я могу переключаться между использованием одного класса в AngularJS?

Question

У меня есть следующий код:

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

Я хотел бы изменить цвет значка SVG в зависимости от того, если мой UI-маршрутизатора состояния следующим образом:

• Если состояние включает в себя «администратор» Я хотел бы, чтобы использовать красно-значок класса
• Если состояние не включает в себя «админ» Я хотел бы, чтобы использовать сине-значок класса

Я сделал что-то вроде этого:

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