изменение сгенерированного класса ng-repeat при клике

Question

изменение сгенерированного класса ng-repeat при клике

0

У меня есть меню, созданное с помощью контроллера, и я хочу добавить класс в соответствующий пункт меню, когда у меня есть определенный URL (я использую ngRoutes). Меню создается из объекта $scope.menu, поэтому я подумал, что просто добавлю к нему свойство стиля, которое я бы обновил, щелкнув ссылку.

Теперь я застрял, потому что каждый раз, когда нажимается ссылка, мне нужно циклически перебирать весь объект, устанавливать все свойства стиля в режим idle, а затем highlighted свойство clicked anchor для highlighted.

С jQuery, я думаю, я бы использовал $(this), но я не знаю, как это сделать с угловым.

мой 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++) {

            }
        }
    });

Если есть хорошая альтернатива для этого, я не думал о том, какой из них использует угловой, html или css, пожалуйста, дайте мне знать. Я новичок в angularJS и импровизации.

Спасибо за помощь

Miha Šušteršič 05 июль 2015, в 10:33

Источник

Теги:

html

angularjs

2 ответа

0

Использовать ngClass:

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

И в вашем контроллере вы должны захватить URL-адрес через window.location.hash а затем сравнить его с link.item:

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

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

}

Chrillewoodz 05 июль 2015, в 06:46

0

это возвращает ошибку "Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 12 of the expression [highlighted:url === link.item] starting at [:url === link.item]. Вы также используете одиночные фигурные скобки вместо двойных в классе ng.
Miha Šušteršič 05 июль 2015, в 08:55
0

@ MihaŠušteršič Ng-класс не использует двойные скобки. Вы использовали двойные? Потому что это может быть причиной ошибки.
Chrillewoodz 05 июль 2015, в 08:57
0

@ MihaŠušteršič Обновленный ответ, вы должны включить в свой контроллер подстроку, чтобы получить необработанную строку хеша. Также убедитесь, что после точки с запятой есть пробел. Мог бы скинуть вещи, не имея этого.
Chrillewoodz 05 июль 2015, в 09:01

Показать ещё 1 комментарий

Ещё вопросы

это возвращает ошибку "Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 12 of the expression [highlighted:url === link.item] starting at [:url === link.item]. Вы также используете одиночные фигурные скобки вместо двойных в классе ng.
@ MihaŠušteršič Ng-класс не использует двойные скобки. Вы использовали двойные? Потому что это может быть причиной ошибки.
@ MihaŠušteršič Обновленный ответ, вы должны включить в свой контроллер подстроку, чтобы получить необработанную строку хеша. Также убедитесь, что после точки с запятой есть пробел. Мог бы скинуть вещи, не имея этого.

Theodore · Accepted Answer · 2015-07-05T07-37-00.000Z

Вот быстрая демонстрация

<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, поскольку он предоставляет эту функциональность из коробки.