Question

我想在路径为.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();
  };
});

部分视图

<li ng-class="{ active: isActive('/'), active: isActive('/main/')}">
  <a href="#/">Home</a>
</li>

相关链接

Adding multiple class using ng-class

AngularJS ng-class multiple conditions

Oliver Tupman: Keep CSS classes out of your Angular controllers

Scotch.io: the many ways to use ng-class

Answer 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/')}"

Shim support for indexOf for older browsers

Answer 2

一天晚了，但希望有所值。

您也可以使用or运算符为该类的一个实例编写它。

ng-class="{ 'active': condition1 || condition2 }"

在AngularJS中使用ng-class添加多个表达式

2 个答案: