How to repeat data in nested ul li ul li list item in angular js?

Question

I am creating a new ul>li>ul>li list and I want to repeat the data according to the list items.

My code is like this:

Screenshot

My Angular code is:

var myAppMy = angular.module('myFapp', []);
myAppMy.controller('myControler', function ($scope) {
    $scope.items = [
      {
        title:"book" [
          {subtitle:"name", description:"____Book_______"}
          ],
        description: "Some Book is very Good."
      }, 
      {
        title:"book_2" [
          {subtitle:"name", description:"____Book_2______"}
          ],
        description: "2Some Book is very Good."
      }
    ];
});

My HTML code is:

<body ng-app="myFapp">
    <ul ng-controller="myControler">
        <li ng-repeat="item in items">
            <div>{{item.title}}</div>
            <div>{{item.description}}</div>
            <ul>
                <li>
                    <div>{{subtitle.title}}</div>
                    <div>{{item.description}}</div>
                </li>
            </ul>
        </li>
    </ul>
</body>

My Plunker

I m repeat a data in listed item as like this ul > li >ul > li in nested child — Rohit Azad Malik
– Rohit Azad Malik, Commented Sep 12, 2014 at 6:00
Invalid JSON title:"book"[{subtitle:"name",description:"____Book_______"}], this will create null/unidentified field — Ravi
– Ravi, Commented Sep 12, 2014 at 6:01
as like this lostechies.com/gabrielschenker/files/2013/12/image_thumb95.png — Rohit Azad Malik
– Rohit Azad Malik, Commented Sep 12, 2014 at 6:02

V31 · Accepted Answer · 2014-09-12 06:10:22Z

Your JSON is improper, It needs to be in this format:

JSON:

$scope.items = [
      {
        "title":"book" ,"subtitle":[
          {"subtitle":"name", "description":"____Book_______"}
          ],
        "description": "Some Book is very Good."
      }, 
      {
        "title":"book_2" , "subtitle":[
          {"subtitle":"name", "description":"____Book_2______"}
          ],
        "description": "2Some Book is very Good."
      }

    ];

And then in your html markup you need to reference it like this (nested ng-repeat):

    <ul ng-controller="myControler">
        <li ng-repeat= "item in items">
          <div>{{item.title}} </div>
          <div>{{item.description}}</div>
          <ul>
            <li ng-repeat="subtitle in item.subtitle">
              <div>{{subtitle.subtitle}} </div>
              <div>{{subtitle.description}}</div>
            </li>
          </ul>
        </li>
      </ul>

Working Plunkr

Collectives™ on Stack Overflow

How to repeat data in nested ul li ul li list item in angular js?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related