使用嵌套角度 ng-repeat 引导单级菜单答案

【问题标题】：Bootstrap single level menu using nested angular ng-repeat使用嵌套角度 ng-repeat 引导单级菜单
【发布时间】：2013-08-02 08:17:33
【问题描述】：

我正在尝试使用 angularJS 制作引导单级菜单。在动态构建<li> 时，它已经可以与 js 和 html 一起使用。

现在我正在尝试使用 AngularJS。

假设我有一个 JS 对象，它有 Cust 和里面的订单。如何制作列表菜单

<ul>
  <li ng-repeat="cust in customers">
    <p>{{cust.name}}</p>
    <li ng-repeat="order in cust.orders">
      <p>{{order.desc}}</p>
    </li>
  </li>
<ul>

由于第一个 li 无法关闭，因此无法正确加载（重叠项目）。

【问题讨论】：

你最后一个<ul> 也未关闭

标签： html twitter-bootstrap angularjs

【解决方案1】：

克里斯托弗是对的，你不能没有<ul>。

我认为您可以这样做以拥有一个一级菜单：

<ul>
    <li ng-repeat="cust in customers">
        <p>{{cust.name}}</p>
        <div ng-repeat="order in cust.orders">
            <p>{{order.desc}}</p>
        </div>
   </li> 
<ul>

也许还可以使用 CSS 以您想要的方式设置样式。

或者这个：

<ul>
    <li ng-repeat="cust in customers">
        <p>{{cust.name}}</p>
        <p ng-repeat="order in cust.orders">
            {{order.desc}}
        </p>
   </li> 
<ul>

【讨论】：

【解决方案2】：

这是无效的标记，您缺少ul

试试

<ul>
  <li ng-repeat="cust in customers">
    <p>{{cust.name}}</p>
    <ul>
        <li ng-repeat="order in cust.orders">
          <p>{{order.desc}}</p>
        </li>
    </ul>
  </li>
</ul>

应该正确渲染它，你的绑定是正确的。

【讨论】：

这是我不想做的。我的问题是：我怎样才能使它成为一个只有一级的菜单。有没有办法做到这一点？
- {{cust.name}}
- {{order.desc}}
我想我不明白你在做什么。您可以同时拥有 li 的 ul 重复的直接子代，但不能让 am li 在里面。您可以将第二个 ng-repeat 更改为使用 div 或其他内容。