@rakro

Активный пункт меню в Angular?

Как правильно присваивать класс активному пункту меню в Angular?
  • Вопрос задан
  • 2276 просмотров
Пригласить эксперта
Ответы на вопрос 2
baskerville42
@baskerville42
Учусь работать (Junior)
Вот код для стандартного ngRoute

<ul>
    <li ng-repeat="link in menu" ng-class="{ active: isActive(\'{{ link.href }}\') }">
        <a ng-href="{{ link.href }}" href="">{{ link.title }}</a>
    </li>
</ul>


В контроллер нужно заинжектить следующие сервисы: $scope, $location
$scope.menu = [{
    "title": "title1",
    "href": "href1"
}, {
    "title": "title2",
    "href": "href2"
}, {
    "title": "title3",
    "href": "href3"
}];

$scope.isActive(location) {
    return location === $location.path()
}


Логика такая, при nrRepeat вы каждый раз стучитесь в функцию isActive передавая ей в качестве аргумента ссылку, которая используется в меню. Функция сверяет текущий url с тем что вы ей передали и возвращает true или false. Далее ngClass подставляет класс active там, где функция isActive вернула true.
Ответ написан
AMar4enko
@AMar4enko
Если ui-router и у пункта меню (или внутри него) есть ui-sref, то ui-sref-active="нужный_класс"
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы