ng-class 的多个参数

Question

我已经使用 ng-class 在页面加载时激活。

我有一个菜单列表，其中一些页面有子页面。我想突出显示（选择任何子页面时使其处于活动状态）。到目前为止我已经完成

这是我的导航控制器

  $scope.isActive = function(destination) {
            return destination === $location.path();

        }

我的菜单项

<ul class="mcd-menu">
                <li>
                    <a ui-sref="app.user.menu1" ng-class="{active: isActive('/menu1')}">
                        <i class="fa fa-home"></i>
                        <strong>Menu 1</strong>
            </a>
                </li>
                <li>
                    <a>
                        <i class="fa fa-th"></i>
                        <strong>Menu 2</strong>

                    </a>
                    <ul>
                        <li><a ui-sref="app.user.submenu1" ng-class="{active: isActive('/submenu1')}"><i class="fa fa-lock"></i>Sub Menu 1</a></li>
                        <li><a ui-sref="app.user.submenu2" ng-class="{active: isActive('/submenu2')}"><i class="fa fa-money"></i>submenu 2</a></li>
                        <li><a ui-sref="app.user.submenu3" ng-class="{active: isActive('/submenu3')}"><i class="fa fa-bolt"></i>submenu 3</a></li>
                        <li><a ui-sref="app.user.submenu4" ng-class="{active: isActive('/submenu4')}"><i class="fa fa-check-square"></i>submenu 4</a></li>
                    </ul>
                </li>
              </ul>

Active 属性可以很好地导航到每个页面

但我想在导航到子菜单时激活菜单 2..我怎样才能做到这一点

我试过了

 <a  ng-class="{active: isActive('/submenu2'),active: isActive('/submenu3'),active: isActive('/submenu4')}"><i class="fa fa-th"></i><strong>Menu 2</strong></a>

Answer 1

您可以使用以下代码为多个条件创建活动链接

<a  ng-class="{active: isActive('/submenu2') || isActive('/submenu3') || isActive('/submenu4')}**strong text**">
  <i class="fa fa-th"></i><strong>Menu 2</strong>
</a>

Answer 2

<!--example giving two classes (for two different conditions)-->
<a ng-class="{'featured': product.featured, 'selected': product.selected}">{{product.description}}</a>

Answer 3

试试这个，

var app = angular.module('app', ['ui.router']);
app.controller('main', function($scope) {
  $scope.selected = function(value) {
    $scope.active = value;
  };
});
app.config(function($stateProvider) {
  $stateProvider.state({
    name: 'Menu1',
    url: '/menu1',
    template: 'This is Menu One.'
  }).state({
    name: 'Item1',
    url: '/menu2/item1',
    template: 'This is Item One.'
  }).state({
    name: 'Item2',
    url: '/menu2/item2',
    template: 'This is Item Two.'
  }).state({
    name: 'Item3',
    url: '/menu2/item3',
    template: 'This is Item Three.'
  });
});

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="//npmcdn.com/angular-ui-router@1.0.0-beta.1/release/angular-ui-router.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body ng-app="app">
  <div ng-controller="main">
    <div>
      <span class="btn btn-default" ui-sref="Menu1" ui-sref-active="active" ng-click="selected(false)">Menu 1</span>
    </div>
    <div>
      <span class="btn btn-default" ng-class="{'active': active === 'menu2'}">Menu 2</span>
      <ul>
        <li ui-sref="Item1" ui-sref-active="active" ng-click="selected('menu2')" class="btn btn-primary btn-xs">Item 1</li>
        <li ui-sref="Item2" ui-sref-active="active" ng-click="selected('menu2')" class="btn btn-primary btn-xs">Item 2</li>
      </ul>
    </div>
    <div>
      <span class="btn btn-default" ng-class="{'active': active === 'menu3'}">Menu 3</span>
      <ul>
        <li ui-sref="Item3" ui-sref-active="active" ng-click="selected('menu3')" class="btn btn-primary btn-xs">Item 3</li>
      </ul>
    </div>
    <div ui-view></div>
  </div>
</body>

ng-class 的多个参数

Multiple Parameters for ng-class

javascript

twitter-bootstrap

angularjs

ng-class