Question

我希望在活动时将活动类添加到菜单栏。我在我的工作场所尝试下面的javascript代码，但没有工作。这是plunkr

的在线链接

<!doctype html>

    <html ng-app="myApp">
      <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
      </head>
      <body>
        <script type="text/ng-template" id="pages/home.html">
          <h1>Home</h1>
          <h3>{{message}}</h3>
        </script>
        <script type="text/ng-template" id="pages/blog.html">
          <h1>Blog</h1>
          <h3>{{message}}</h3>
        </script>
        <script type="text/ng-template" id="pages/about.html">
          <h1>About</h1>
          <h3>{{message}}</h3>
        </script>

        <a href="#/">Home</a>
        <a href="#/blog">Blog</a>
        <a href="#/about">About</a>

        <div ng-view></div>

        <script src="app.js"></script>
      </body>
    </html>

    javascript file

    var app = angular.module('myApp', ['ngRoute']);

    app.config(function($routeProvider) {
      $routeProvider

      .when('/', {
        templateUrl : 'pages/home.html',
        controller  : 'HomeController'
      })

      .when('/blog', {
        templateUrl : 'pages/blog.html',
        controller  : 'BlogController'
      })

      .when('/about', {
        templateUrl : 'pages/about.html',
        controller  : 'AboutController'
      })

      .otherwise({redirectTo: '/'});
    });

    app.controller('HomeController', function($scope) {
      $scope.message = 'Hello from HomeController';
    });

    app.controller('BlogController', function($scope) {
      $scope.message = 'Hello from BlogController';
    });

    app.controller('AboutController', function($scope) {
      $scope.message = 'Hello from AboutController';
    });

Answer 1

在为获取当前路径命名的控制器中添加变量

echo '<select class="inputsb" name="frekwencja['.$i.'][]" style="width:45px;">';

然后在链接

中添加

app.controller('HomeController', function($scope, $location, $rootScope) {
  $rootScope.activePath = $location.path();
  $scope.message = 'Hello from HomeController';
});

app.controller('BlogController', function($scope, $location, $rootScope) {
  $rootScope.activePath = $location.path();
  $scope.message = 'Hello from BlogController';
});

app.controller('AboutController', function($scope, $location, $rootScope) {
  $rootScope.activePath = $location.path();
  $scope.message = 'Hello from AboutController';
});

ng-class

或

<a href="#/" ng-class="{'className': $root.activePath == '/'}">Home</a> <a href="#/blog" ng-class="{'className': $root.activePath== '/blog'}">Blog</a> <a href="#/about" ng-class="{'className': $root.activePath== '/about'}">About</a>

Answer 2

在Html中

 <ul ng-repeat="menu in topMenuData.menu" class="nav navbar-nav">
         <li ng-class="{active: isActiveMenu(menu)}">
<a ui-sref="{{menu.Url}}" ui-sref-opts="{reload: true, notify: true}" data-ng-click="isNoteClick(menu.Url)">
<i class="{{menu.IconCssClass}}"></i>  {{menu.Name}}</a>
</li>
</ul>

在你的Js中

function isActiveMenu(menu) {
            //if menu is current then show selected
            if ($state.current.name.indexOf(menu.Url) == 0) {
                return true;
            }


            return result;
        }

在CSS中

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #ffffff !important;
    background-color: #E9573E !important;
}

如何在angularjs中添加活动类到菜单

2 个答案: