Angular JS 中 ng-repeat 中的数据绑定

Question

我是一个 Angular JS 初学者，这可能是一个非常愚蠢的问题，但我发现这个问题很困难。我用 angular js 编写了以下代码来显示带有类别的产品列表。

  <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>

我正在使用 ng-repeat 循环遍历项目列表并显示它。我对使用多个 ng-repeat 以及如何绑定数据感到有点困惑。我需要类似于下图的输出。

提前致谢。

Answer 1

替换

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

到

ng-repeat="item in categories.data"

here is plunker

Answer 2

您可以将具有 ng-repeat 的元素视为具有自己的局部作用域。可以把它想象成 {} 中的一段代码，用于 if 语句或类似的东西。请注意下面的结束 li 标签，您必须在 li 标签创建的块内才能引用 item.

您还想重复 categories.data

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

Answer 3

问题出在这里

      <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>

Angular JS 中 ng-repeat 中的数据绑定

Data binding in ng-repeat in Angular JS

javascript

html

angularjs

angularjs-ng-repeat

ng-repeat