根据条件将菜单项显示为列答案

【问题标题】：Display menu items as column based on condition根据条件将菜单项显示为列
【发布时间】：2016-08-20 15:43:18
【问题描述】：

我创建了一个菜单，我需要帮助来显示菜单子项

我创建了一个 plunker。请通过这个来了解我想要什么（全屏打开 plunker） https://plnkr.co/edit/IMEJFPfl5kavKvnUYaRy?p=preview

在上面的 plunker 中，我有两个下拉菜单（'List' 和 'Dropdown'）。
“列表”是硬编码值，当我获取动态数据时，我想在“下拉”中显示子菜单。
'Dropdown' 获取子菜单项如下，

 $scope.items = [
        {
            "Name": "Item1",
            "Url": ""
        },
    {
            "Name": "List1",
            "Url": "www.google.com"
        },
    {
            "Name": "List2",
            "Url": "www.google.com"
        },
    {
            "Name": "Item2",
            "Url": ""
        },
    {
            "Name": "List1",
            "Url": "www.w3schools.com"
        },
    {
            "Name": "List2",
            "Url": "www.w3schools.com"
        }
      ]

这里如果“Url”==""，那么它应该以粗体显示，直到我再得到一个“Url”==""，所有其他项目都应该显示在它下面。理想情况下，当 "Url" =="" 时，它应该移到下一列。所以我的 html 应该与上面的数据如下所示

<div class="col-sm-2" >
              <li><strong>Item1</strong></li>
              <li>list1</li>
              <li>list2</li>
</div>

<div class="col-sm-2" >
              <li><strong>Item2</strong></li>
              <li>list1</li>
              <li>list2</li>
</div>

在 plunker 中，我已经完成了“Url”=="" 以粗体显示的项目，但所有内容都显示在单列中。一旦我在 ng-repeat 中找到“Url”==""，我就想移到其他列。我怎样才能做到这一点？我尝试了如下的书写条件，

 <ul data-ng-class="{'col-sm-3 list-unstyled': item.Url==''}" data-ng-repeat="item in items">

但只有带有“Url” =="" 的项目移动到下一列，连续的项目不会。请帮助我使“下拉”显示像 plunker 中所示的“列表”。

【问题讨论】：

标签： html css angularjs angular-ui-bootstrap

【解决方案1】：

我不知道为什么人们对这个问题给予减分。如果答案如此简单，请告诉我。从这么多天开始，我一直在努力做到这一点。如果您还没有理解这个问题，请告诉我，我会说清楚。我尽力传达这个问题。

【讨论】：