Bootstrap single level menu using nested angular ng-repeat

Question

I am trying to make a bootstrap single level menu using angularJS. It already works with js and html when the <li> is dynamically built.

Now I am trying to use AngularJS.

Suppose I have a JS object which has Cust and then orders inside. How can I make a list menu

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

This doesn't load properly (overlapping items) as the first li can't be closed.

You last <ul> is unclosed as well

feitla
– feitla

2013-08-01 17:50:12 +00:00
Commented Aug 1, 2013 at 17:50 — feitla
– feitla, Commented Aug 1, 2013 at 17:50

Chalisi · Accepted Answer · 2013-08-01 19:21:36Z

2

Christopher is right, you can't do without <ul>.

I think you can do this to have a one level menu :

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

And perhaps play with CSS to style in the way you want.

Or this, too :

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

edited Aug 1, 2013 at 19:21

answered Aug 1, 2013 at 19:15

Chalisi

1651 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christopher Marshall · Accepted Answer · 2013-08-01 20:33:49Z

2

That's invalid markup, you're missing a ul

Try

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

That should render it correctly, your bindings are correct.

edited Aug 1, 2013 at 20:33

answered Aug 1, 2013 at 17:40

Christopher Marshall

10.7k10 gold badges57 silver badges95 bronze badges

2 Comments

akjha627 Over a year ago

This is what I don't want to do. My question is : how I can make it a menu of one level only. Is there a way to do this ? <ul> <li ng-repeat="cust in customers"> <p>{{cust.name}}</p> </li> <li ng-repeat="order in cust.orders"> <p>{{order.desc}}</p> </li> <ul>

Christopher Marshall Over a year ago

I guess I don't understand what you're trying to do. You can have both li's direct children of the ul repeat, but not am li inside. You can change the second ng-repeat to use a div or something instead.

Collectives™ on Stack Overflow

Bootstrap single level menu using nested angular ng-repeat

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related