angularjs - ng-switch always true

Question

I want to hide uls if they are empty:

<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>

But they are not hidden regardless of the content in the ng-switch on

This is the data structure:

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 ...
];

Answer 1

ng-switch就像...一样...一个 javascript switch，您需要与它ng-switch on一起使用ng-switch-when它才能工作（请查看此处的示例）。但是，在这种情况下，ng-switch这似乎不是一个好的解决方案，您需要的是AngularUI ui-if指令（此处为 src 代码）之类的东西：

什么？从 DOM 中完全移除元素，而不是仅仅隐藏它。

为什么？在 DOM 遍历很重要的情况下（例如 CSS 选择器 :first-child、:last-child 和 :nth()-child），仅仅隐藏元素是不够的。

例子：

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

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