Question

我有一个从控制器生成的菜单，当我在某个URL时（我使用ngRoutes），我想在相应的菜单项上添加一个类。菜单是从$scope.menu对象生成的，所以我想我只需要添加一个样式属性，点击链接后我会更新。

现在我卡住了，因为我需要在每次点击链接时循环遍历整个对象，将所有样式属性设置为idle，然后将点击的锚点属性设置为highlighted。

使用jQuery我想我会使用$(this)，但我不知道如何使用angular。

我的HTML：

<div class="header" ng-controller="NavbarController">
  <ul>
    <li ng-repeat="link in menu" class="{{link.style}}"><a ng-href="{{link.href}}">{{link.item}}</a></li>
  </ul>
</div>

控制器：

'use strict';

angular.module('angularApp')
    .controller('NavbarController', function ($scope) {
        $scope.menu = [
            {
                item: 'articles',
                href: '#/articles',
                style: 'highlighted'
            },
            {
                item: 'sites',
                href: '#/sites',
                style: 'idle'
            },
            {
                item: 'contact',
                href: '#/contact',
                style: 'idle'
            },
            {
                item: 'forum',
                href: '#/forum',
                style: 'idle'
            },
            {
                item: 'account reviews',
                href: '#/account_reviews',
                style: 'idle'
            },
            {
                item: 'login',
                href: '#/login',
                style: 'idle'
            }
        ]; // end $scope.menu
        $scope.setMenuStlye = function() {
            for(x=0; x<$scope.menu.length; x++) {

            }
        }
    });

如果有一个很好的替代方案，我没有想到哪个使用angular，html或css请告诉我。我是angularJS的新手，即兴创作。

感谢您的帮助

Answer 1

使用ngClass：

<li ng-repeat="link in menu" ng-class="{highlighted: url === link.item}"><a ng-href="{{link.href}}">{{link.item}}</a></li>

在您的控制器中，您必须通过window.location.hash抓取网址，然后将其与link.item进行比较：

.controller('NavbarController', function ($scope) {

  $scope.url = window.location.hash.substring(2);

}

Answer 2

这是一个快速demo

<li ng-repeat="link in menu" ng-class="menuClass(link.item)"><a ng-href="{{link.href}}">{{link.item}}</a>

$scope.menuClass = function (page) {

        var current = window.location.hash.substring(1).replace("/", "");
        console.log(current)
        return page === current ? "active" : "";
    };

您可以将所需的类作为函数参数传递给辅助函数。无论如何，我强烈建议开始使用UI Router，因为它提供了开箱即用的功能。

在点击时更改ng-repeat生成的类

2 个答案: