Data binding in ng-repeat in Angular JS

Question

I am a Angular JS beginner and this might be a very silly question but i am finding difficulty with this. I have the following code written in angular js to display the list of products with the categories.

  <html>
     <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">      </script>
        <script>
           var myApp = angular.module("myApp",[]);
           myApp.controller('myController',function($scope){
           $scope.welcome = "WELCOME TO STORE"
           $scope.products = 
           {
             "ProductDetails": [
               {
                 "category": "Favorites",
                 "data": [
                   {
                     "price": "10",
                     "description": "Favorites product1 demo description",
                     "name": "Demo product1"
                   },
                   {
                     "price": "13",
                     "description": "Favorites product2 demo description",
                     "name": "Demo product2"
                   }
                 ]
               },
               {
                 "category": "Stationary",
                 "data": [
                   {
                     "price": "10",
                     "description": "Favorites product1 demo description",
                     "name": "Demo product1"
                   },
                   {
                     "price": "13",
                     "description": "Favorites product2 demo description",
                     "name": "Demo product2"
                   },
                   {
                     "price": "13",
                     "description": "Favorites product2 demo description",
                     "name": "Demo product2"
                   }
                 ]
               },
               {
                 "category": "Food",
                 "data": [
                   {
                     "price": "10",
                     "description": "Favorites product1 demo description",
                     "name": "Demo product1"
                   },
                   {
                     "price": "13",
                     "description": "Favorites product2 demo description",
                     "name": "Demo product2"
                   },
                   {
                     "price": "13",
                     "description": "Favorites product2 demo description",
                     "name": "Demo product2"
                   }
                 ]
               }
             ]
           }
           });
        </script>
     </head>
     <body ng-app="myApp">
        <div ng-controller="myController">
           <h1>{{welcome}}</h1>
           <ul>
              <li ng-repeat="categories in products.ProductDetails">
                 <h3> {{categories.category}}</h3>
                 <ul>
                    <li ng-repeat="item in products.ProductDetails.data"></li>
                    <p>{{item.name}}</p>
                    <p>{{item.description}}</p>
                    <p>{{item.price}}</p>
                 </ul>
              </li>
           </ul>
        </div>
  </html>
  </body>

i am using ng-repeat to loop through the list of items and and display it. i am bit confused about using multiple ng-repeat and how to bond the data. i need the output similar to the image below.

Thanks in advance.

replace ng-repeat="item in products.ProductDetails.data to ng-repeat="item in categories.data in inner <li> ng-repeat — gaurav bhavsar
– gaurav bhavsar, Commented Nov 21, 2016 at 12:26

mikeb · Accepted Answer · 2016-11-21 12:28:19Z

2

You can think of the element that has the ng-repeat as having its own local scope. Think of it like a block of code inside {} for an if statement or something like that. Note the closing li tag below, you must be inside the block created by the li tag to be able to reference item.

You also want to repeat over categories.data

<li ng-repeat="item in categories.data">
                    <p>{{item.name}}</p>
                    <p>{{item.description}}</p>
                    <p>{{item.price}}</p>
</li>

answered Nov 21, 2016 at 12:28

mikeb

11.5k9 gold badges73 silver badges135 bronze badges

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

Comments

gaurav bhavsar · Accepted Answer · 2016-11-21 12:32:52Z

1

Replace

ng-repeat="item in products.ProductDetails.data"

To

ng-repeat="item in categories.data"

here is plunker

edited Nov 21, 2016 at 12:32

answered Nov 21, 2016 at 12:27

gaurav bhavsar

2,0512 gold badges26 silver badges36 bronze badges

1 Comment

Sa E Chowdary Over a year ago

provide proper plunker please

SURJEET SINGH Bisht · Accepted Answer · 2016-11-21 12:30:40Z

0

Here Is the problem

      <ul>
          <li ng-repeat="categories in products.ProductDetails">
             <h3> {{categories.category}}</h3>
             <ul>
                <li ng-repeat="item in categories.data"></li>//Set Categories
                <p>{{item.name}}</p>
                <p>{{item.description}}</p>
                <p>{{item.price}}</p>
             </ul>
          </li>
       </ul>

answered Nov 21, 2016 at 12:30

SURJEET SINGH Bisht

88110 silver badges16 bronze badges

Collectives™ on Stack Overflow

Data binding in ng-repeat in Angular JS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related