代码之家  ›  专栏  ›  技术社区  ›  Eduardo

angularjs:ng使用对象数组的数组字段重复

  •  1
  • Eduardo  · 技术社区  · 6 年前

    我有一个JSON结构:

    let total_price = "£100";
    
    let product_groups = [
        {
            "name": "group 1",
            "summary": "group 1 summary",
            "products": [
                {
                    "name": "product 1",
                    "price": "£10",
                    ...
                }, 
                ...
            ]
        },
        ...
    ]
    

    我正试图将此展平并使用下表显示它

    <table class="table">
        <thead>
            <tr>
                <th>Group Name</tr>
                <th>Product Name</tr>
                <th>Product Price</tr>
            </tr>
         </thead>
         <tbody>
             <tr ng-repeat="group in product_groups">
                 <td>{{group.name}}</td>
                 <td>{{product.name}}</td>
                 <td>{{product.price}}<td>
             </tr>
             <tr>
                 <th colspan="2">Total</th>
                 <td>{{total_price}}</td>
             </tr>
         </tbody>
    </table>
    

    但这显然不能让我接触到每种产品。有什么方法可以用 ng-repeat ?还是需要先在控制器中展平数据结构?

    4 回复  |  直到 6 年前
        1
  •  1
  •   Aleksey Solovey    6 年前

    您应该扁平化JSON。我建议改变你的结构:

    product_groups = [{
      "name": "group 1",
      "summary": "group 1 summary",
      "products": [{
          "name": "product 1",
          "price": "£10"
        },
        {
          "name": "product 2",
          "price": "£20"
        }
      ]
    }]
    

    到:

    product_groups = [{
        "name": "group 1",
        "summary": "group 1 summary",
        "product": {
          "name": "product 1",
          "price": "£10"
        }
      },
      {
        "name": "group 1",
        "summary": "group 1 summary",
        "product": {
          "name": "product 2",
          "price": "£20"
        }
      }
    ]
    

    然后您可以简单地使用这个例子:

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.product_groups = [{
          "name": "group 1",
          "summary": "group 1 summary",
          "product": {
            "name": "product 1",
            "price": "£10",
          }
        },
        {
          "name": "group 1",
          "summary": "group 1 summary",
          "product": {
            "name": "product 2",
            "price": "£20",
          }
        }
      ]
    });
    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    
    <body>
    
      <div ng-app="myApp" ng-controller="myCtrl">
    
        <table class="table">
          <thead>
            <tr>
              <th>Group Name</th>
              <th>Product Name</th>
              <th>Product Price</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="group in product_groups">
              <td>{{group.name}}</td>
              <td>{{group.product.name}}</td>
              <td>{{group.product.price}}
                <td>
            </tr>
          </tbody>
        </table>
    
      </div>
    
    </body>
    
    </html>
        2
  •  2
  •   amrender singh    6 年前

    可以使用嵌套 ng-repeat' and use 重复启动 and ng repeat end`尝试以下操作。

    var app = angular.module('plunker', []);
    
    app.controller('MainCtrl', function($scope) {
     $scope.product_groups = [ { "name": "group 1", "summary": "group 1 summary", "products": [ { "name": "product 1", "price": "£10", }, { "name": "product 1", "price": "£10", }, ] }, { "name": "group 2", "summary": "group 2 summary", "products": [ { "name": "product 21", "price": "£20", }, { "name": "product 15", "price": "£80", }, ] } ];
    });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <body ng-app="plunker">
      <div ng-controller="MainCtrl">
        <table class="table">
        <thead>
            <tr>
                <th>Group Name</th>
                <th>Product Name</th>
                <th>Product Price</th>
            </tr>
         </thead>
         <tbody>
            <tr ng-repeat-start="group in product_groups"></tr>
             <tr  ng-repeat="product in group.products">
                 <td>{{group.name}}</td>
                  <td>{{product.name}}</td>
                  <td>{{product.price}}</td>
             </tr>
            <tr ng-repeat-end></tr>
         </tbody>
    </table>
      </div>
    </body>
        3
  •  1
  •   Devraj verma    6 年前

    嗨,试试下面的解决方案

        $scope.newArray = [];
    
        let product_groups = [
            {
                "name": "group 1",
                "summary": "group 1 summary",
                "products": [
                    {
                        "name": "product 1",
                        "price": "£10",
                    }, 
                ]
            },
        ];
    
    for(var i = 0; i< product_groups.length; i++) {
       for(var j =0; j< product_groups[i].products.length; j++) {
        var flattenProduct = {
                               gname:product_groups[i].name, 
                               name:product_groups[i].products[j].name,
                               price : product_groups[i].products[j].price
                            };
            $scope.newArray.push(flattenProduct );
     }
    
    }
    

    然后调用HTML,如下所示:

    <table class="table">
        <thead>
            <tr>
                <th>Group Name</tr>
                <th>Product Name</tr>
                <th>Product Price</tr>
            </tr>
         </thead>
         <tbody>
             <tr ng-repeat="p in newArray">
                 <td>{{p.gname}}</td>
                 <td>{{p.name}}</td>
                 <td>{{p.price}}<td>
             </tr>
         </tbody>
    </table>
    
        4
  •  -1
  •   wahid_abdul    6 年前

    在现有循环中使用新的ng repeat,如嵌套循环。