CODEWITHSUNDEEP
htmltwitter-bootstrapangularjs
akjha627
akjha627

Reputation: 215

Bootstrap single level menu using nested angular ng-repeat

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.

Upvotes: 0

Views: 823

Answers (2)

Christopher Marshall
Christopher Marshall

Reputation: 10736

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.

Upvotes: 2

Chalisi
Chalisi

Reputation: 165

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>

Upvotes: 2

Related Questions