CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

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

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

Upvotes: 0

Views: 1930

Answers (1)

V31
V31

Reputation: 7666

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

Upvotes: 2

Related Questions