Создание выпадающего меню (Accordion) с AngularJS вместо jQuery для бокового меню

Question

Создание выпадающего меню (Accordion) с AngularJS вместо jQuery для бокового меню

0

Поэтому у меня есть боковая панель из шаблона, в которой jquery используется для создания выпадающего списка. Но я изучаю angularjs, и я думаю, что для этого должно быть решение AngularJS. Я продолжаю бороться с этим. Но я уверен, что в этом всемогущем случае должно быть решение.

<li ng-class=""><a href="" title="Components" ripple=""><em class="sidebar-item-icon icon-box"></em><em class="sidebar-item-caret fa pull-right fa-angle-right"></em><span translate="sidebar.nav.component.COMPONENTS">Components</span></a>
    <ul class="nav sidebar-subnav">
        <li>
            <a><em class="sidebar-item-icon fa fa-angle-right"></em>Components</a>
        </li>
        <li class="sidebar-subnav-header">
            <a><em class="sidebar-item-icon fa fa-angle-right"></em>Components</a>
        </li>
        <li>
            <a href="ui.buttons.html" title="Buttons" data-ripple=""><em class="sidebar-item-icon"></em><span>Buttons</span></a>
        </li>
        <li>
            <a href="ui.panels.html" title="Panels" data-ripple=""><em class="sidebar-item-icon"></em><span>Panels</span></a>
        </li>
        <li>
            <hr>
        </li>
        <li>
            <a href="ui.nestable.html" title="Nestable" data-ripple=""><em class="sidebar-item-icon"></em><span>Nestable</span></a>
        </li>
        <li>
            <a href="ui.sortable.html" title="Sortable" data-ripple=""><em class="sidebar-item-icon"></em><span>Sortable</span></a>
        </li>
    </ul>
</li>

Пример того, как это работает с jQuery:

Возможное угловое решение с ui-bootstrap-аккордеон может быть чем-то вроде этого примера plunker: http://plnkr.co/edit/ToGJCbFOEmD46XDHLtt1?p=preview

Но тогда у меня есть две новые проблемы.

Как заставить Sub-Item вести себя как ссылка.

И тогда стиль li, ul больше не применяется.

Greg 02 нояб. 2015, в 14:31

Источник

0

Да, есть поддержка выпадающих меню. Смотрите Angular Select . Поддержка Bootstrap вы найдете здесь У вас есть более подробные вопросы?
Michael 02 нояб. 2015, в 12:41
0

В чем конкретная проблема? Здесь нет jQuery
charlietfl 02 нояб. 2015, в 12:55
0

Когда я использую, например, кнопку <! - Split -> из angular-bootstrap, один раз нажимая кнопку раскрывающегося списка, она закрывается. Но это думаю, что это должно быть больше похоже на Аккордеон. Но я хочу использовать CSS из шаблона.
Greg 02 нояб. 2015, в 13:01

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

Теги:

jquery

angularjs

3 ответа

Ещё вопросы

Да, есть поддержка выпадающих меню. Смотрите Angular Select . Поддержка Bootstrap вы найдете здесь У вас есть более подробные вопросы?
В чем конкретная проблема? Здесь нет jQuery
Когда я использую, например, кнопку <! - Split -> из angular-bootstrap, один раз нажимая кнопку раскрывающегося списка, она закрывается. Но это думаю, что это должно быть больше похоже на Аккордеон. Но я хочу использовать CSS из шаблона.

Abhishek Shukla · Answer 1 · 2015-11-02T11-13-00.000Z

Пожалуйста, посетите Angularjs Bootstrap UI Dropdown, это решит ваш запрос.

Надеюсь это поможет!.

hasbi · Answer 2 · 2015-11-02T10-48-00.000Z

Я думаю, вы должны попробовать ui-bootstrap. они обеспечивают компонент аккордеона. вам просто нужно добавить стиль css для достижения того, что у вас есть на скриншоте

Jelmer · Answer 3 · 2015-11-02T10-35-00.000Z

Я бы рекомендовал использовать Ionic Framework при использовании Angular. Это основа, которая прекрасно работает вместе с Angular. Вы также можете создать легкий sidemenus с ним.

Для получения дополнительной информации проверьте здесь.