Добавление нескольких выражений с использованием 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 }"