0

ul空の場合はsを非表示にします。

<div class="nav-manage clearfix" ng-app="linksManager">

    <script type="text/ng-template" id="inner-list.html">

        <li ng-repeat='link in link.submenu'>
            <a href="{{link.url}}">{{link.text}}</a>
            <div ng-switch on="link.submenu">
                <ul class="sortable" ng-include="'inner-list.html'">
            </div>
        </li>

    </script>

    <div class="links-arrange" ng-controller="linksRarrange">
        <ul class="sortable">
            <li ng-repeat="link in links">
                    <a href="{{link.url}}">{{link.text}}</a>
                    <div ng-switch on="link.submenu">
                        <ul class="sortable" ng-include="'inner-list.html'"></ul>
                    </div>
            </li>
        </ul>
    </div>

ただし、コンテンツに関係なく非表示にはなりません。ng-switch on

これはデータ構造です:

var linksData = [
    {
        text: 'Menu Item 1',
        url: '#'
    }, {
        text: 'Menu Item 2',
        url: '#',
        submenu: [
            {
                text: 'Sub-menu Item 3',
                url: '#'
            }, {
                text: 'Sub-menu Item 4',
                url: '#',
                submenu: // etc ...
];
4

1 に答える 1

2

ng-switch動作するのは...よく...javascriptです。動作させるには、一緒switchに使用する必要があります(ここの例を確認してください)。ただし、この場合、適切な解決策ではないようです。必要なのは、AngularUIディレクティブ(ここではsrcコード)のようなものです。ng-switch onng-switch-whenng-switch ui-if

何?DOMを非表示にするのではなく、DOMから完全に削除します。

なんで?DOMトラバーサルが重要な状況(CSSセレクター:first-child、:last-child、:nth()-childなど)では、要素を非表示にするだけでは不十分です。

例:

<div ui-if="link.submenu">

jsfiddle: http: //jsfiddle.net/bmleite/fBLTd/

于 2013-02-12T11:04:46.840 に答える