Добавление нескольких выражений с использованием ng-класса в AngularJS
Я пытаюсь установить класс .active
, когда путь http://localhost/#/
или http://localhost/#/main/
, поскольку оба пути являются одной и той же страницей.
Почему ng-class="{'class1' : expression1, 'class1' : expression2}"
не работает?
контроллер
angular.module('testApp')
.controller('NavmenuCtrl', function ($scope, $location) {
$scope.isActive = function (providedPath) {
return providedPath === $location.path();
};
});
Partials View
<li ng-class="{ active: isActive('/'), active: isActive('/main/')}">
<a href="#/">Home</a>
</li>
Ссылки по теме
Добавление нескольких классов с использованием ng-класса
Множественные условия AngularJS ng-класса
Оливер Тупман: сохраните классы CSS из ваших контроллеров Angular
Scotch.io: множество способов использования ng-класса
Ответы
Ответ 1
Представляя свой комментарий, да, ваша проблема связана с дублирующимися ключами, вы можете просто: -
ng-class="{ active: isActive('/') || isActive('/main/')}"
Или, возможно, лучше: -
Пусть ваш класс isActive
принимает несколько аргументов: -
$scope.isActive = function () {
//Look for a match in the arguments array
return [].indexOf.call(arguments, location.path()) > -1;
};
и использовать его как: -
ng-class="{ active: isActive('/', '/main/')}"
Поддержка прокрутки indexOf
для старых браузеров
Ответ 2
Поздно, но, надеюсь, стоит того.
Вы также можете записать его с помощью оператора или для одного экземпляра класса.
ng-class="{ 'active': condition1 || condition2 }"