CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-ng-repeat
Sha
Sha

Reputation: 1974

Data binding in ng-repeat in Angular JS

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.

enter image description here

Thanks in advance.

Upvotes: 0

Views: 1609

Answers (3)

gaurav bhavsar
gaurav bhavsar

Reputation: 2043

Replace 

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

To

ng-repeat="item in categories.data"

here is plunker

Upvotes: 1

SURJEET SINGH Bisht
SURJEET SINGH Bisht

Reputation: 881

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>

Upvotes: 0

mikeb
mikeb

Reputation: 11267

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>

Upvotes: 2

Related Questions