Как на angular js реализовать выделение объекта по клику?

Question

[Вячеслав Лебедев]

Как используя модуль ui.router реализовать выделение (визуально поменять цвет к примеру) объекта (текста в теге a) по клику?
Приведите не сложный пример какой нибудь :)

Answer 1

[Sergey Romanov]

Не совсем понятно что имется в виду выделение, и что имется в виду под объектом. Объект это HTML елемент или слово в тексте? Ну вот предварительно.

В шаблоне.

<span ng-click="select($event)">Объект</span>

В коде

$scope.select = function($event) {
      angular.element($event.target).addClass('badge');
}

Comments

[Вячеслав Лебедев]

Можете полностью написать, как будет выглядеть приложение? Я только начал изучать этот фрэймворк :) Прошу помощи. Если не трудно :)))

[Sergey Romanov]

slavikse: для этого ответьте на вопросы. Что вы имеете в виду под выделить? Это как то подсвтетить или конктретно выделить как выделяется текст? Что такое объект?

Можете просто описать что вы хотите сделать? Ну типа я делаю магазин, когда покупатель заходи и кликает на товаре, я хочу что бы была видна рамка у такого товара.

[Вячеслав Лебедев]

С этим я кажется разобрался, с помощью вот такой строки: ui-sref-active="active". И я просто подсвечиваю пункт меню. :)

Теперь у меня другой вопрос.
Имеется 2 меню, они как бы зависят друг от друга, т.е. по клику на первое, выводится список элементов второго меню.

Загвоздка в том, что при клике на элемент из второго меню, выделение с первого меню пропадает :(

Как сделать так, что бы оба меню подсвечивали те пункты, на которые нажали...

Мне уже кажется, что в описании задачи запутываю и Вас и себя :(

[Sergey Romanov]

Ну теперь понятно. вы подсвечиваете элементы меню классом active. Попробуйте использовать ng-class для того что бы назначить класс active. Используйте тоже условие при котором вы показываете подменю. Тогда когда подменю показывается, и ссылка будет активной.

Вы можете свой код выложить на jsbin или plunker?

[Вячеслав Лебедев]

Sergey Romanov: код выложить будет проблематичным. Мне подсказывают, что можно выделять пункты по url, у меня такая логика, что каждое нажатие на меню, меняет url. Вот думаю теперь, как распарсить url и выделять те меню, на которые я нажимал, что бы построился url.
Вот примерчик url:
/app/index.html#/pencil/permissions
После хеша, идет меню. Первого и второго уровня. Как мне их выделить.

А вот код для построения такого пути:

var routing = angular.module('routingApp', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider){
        $stateProvider
            .state('home', {
                url: '/',
                views: {
                    'content': {
                        templateUrl: 'views/home.html'
                    }
                }
            })

            .state('pencil', {
                url: '/pencil',
                views: {
                    'menu2': {
                        templateUrl: 'views/pencil.html',
                        controller: 'pencil-menu2'
                    }
                }
            })

            .state('globe', {
                url: '/globe',
                views: {
                    'menu2': {
                        templateUrl: 'views/globe.html'
                        //controller: 'globe-menu2'
                    }
                }
            })

            .state('pencil/permissions', {
                url: '/pencil/permissions',
                views: {
                    'menu2': {
                        templateUrl: 'views/pencil.html',
                        controller: 'pencil-menu2'
                    },
                    'content': {
                        templateUrl: 'views/permissions.html'
                    }
                }
            })

            .state('pencil/role', {
                url: '/pencil/role',
                views: {
                    'menu2': {
                        templateUrl: 'views/pencil.html',
                        controller: 'pencil-menu2'
                    },
                    'content': {
                        templateUrl: 'views/role.html'
                    }
                }
            });

[Вячеслав Лебедев]

Sergey Romanov: возможно ли прямо здесь присваивать класс .active для меню?
Вот .active
.menu2 a.active {
background: darkgreen; }

[Sergey Romanov]

Ну вот теперь понятно.

1, Нужно создать абстрактный стэйт который будет родителем всех остальных стейтов.
2, В этом стейте нужно сделать метод который будет отвечать за подсветку. Напрмер.

$scope.menuState = function(url) {
    
    return 'active';
}

Там мы проверяем соответствие параметра и текущего урл и если совпадает или начало совпадает, то возвращает 'active'.

3, Теперь в HTML

<li ng-class="menuState('/pencil/permissions')"><a ui-href="">Permissions</a></li>

Как то вот так.