使用AngularJS创建下拉列表（Accordion）而不是侧栏菜单的jQuery

Question

所以我有一个模板的侧边栏，它使用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手风琴的可能的angularjs解决方案可能就像这个plunker示例：http://plnkr.co/edit/ToGJCbFOEmD46XDHLtt1?p=preview

但后来我遇到了两个新问题。

如何使子项表现得像链接。

然后li，ul风格不再适用了。

Answer 1

请访问Angularjs Bootstrap UI Dropdown，这将解决您的疑问。

希望这有帮助！

Answer 2

我建议在使用Angular时使用Ionic Framework。它是一个完美地与Angular一起工作的框架。您也可以使用它创建简单的侧面菜单。

有关详细信息，请查看 here

Answer 3

我认为你应该试试ui-bootstrap。 他们提供accordion component。 你只需要添加一些CSS样式来实现屏幕截图中的内容