在 ng-repeat 中附加结果，可能吗？

Question

尝试使用 AngularJS 从 Northwind 数据集中设置一个简单的发票集合。有几个单独的项目由同一个 OrderID 连接 - 我想在同一个 table 中显示它们。这是否可以使用 ng-repeat，或者我必须找到其他解决方案吗？

以下是相关片段：

app.controller('fetchData', function($scope, $http) {
    let dynamicContent = getParameterByName('q'); //checks if any parameter is present in the URL
    if (dynamicContent) { //runs the fetching if parameter is present
    $scope.param = dynamicContent; //saves URL parameter, to be used with ng-if
    $http.get(BASE_URL+dynamicContent) //appends chosen parameter from URL to base URL
        .then(function(response) {
        $scope.rawData = response.data; //saves array returned from ODATA-source
    });
}});




<div ng-if="param == 'Invoices'">
   <div ng-repeat="invoice in rawData.value">
       <table class="table-responsive" id="invoice-items">
          <tr>
             <th>Item</th>
             <th>Cost</th>
             <th>Quantity</th>
             <th>Price</th>
          </tr>
          <tr class="item-row">
             <th>{{ invoice.ProductName }}</th>
             <th>${{ invoice.UnitPrice }} </th>
             <th>{{ invoice.Quantity }} </th>
             <th>${{ invoice.ExtendedPrice }} </th>
           </tr>
       </table>
   </div>
</div>

JSON

{
    "ShipName": "Alfred's Futterkiste",
    "ShipAddress": "Obere Str. 57",
    "ShipCity": "Berlin",
    "ShipRegion": null,
    "ShipPostalCode": "12209",
    "ShipCountry": "Germany",
    "CustomerID": "ALFKI",
    "CustomerName": "Alfreds Futterkiste",
    "Address": "Obere Str. 57",
    "City": "Berlin",
    "Region": null,
    "PostalCode": "12209",
    "Country": "Germany",
    "Salesperson": "Margaret Peacock",
    "OrderID": 10692,
    "OrderDate": "1997-10-03T00:00:00Z",
    "RequiredDate": "1997-10-31T00:00:00Z",
    "ShippedDate": "1997-10-13T00:00:00Z",
    "ShipperName": "United Package",
    "ProductID": 63,
    "ProductName": "Vegie-spread",
    "UnitPrice": 43.9,
    "Quantity": 20,
    "Discount": 0,
    "ExtendedPrice": 878,
    "Freight": 61.02
}

Answer 1

"ng-repeat"常用来只填一个table，就像这样：

<div ng-if="param == 'Invoices'">
   <table class="table-responsive" id="invoice-items">
      <tr>
         <th>Item</th>
         <th>Cost</th>
         <th>Quantity</th>
         <th>Price</th>
      </tr>
      <tr class="item-row" ng-repeat="invoice in rawData.value">
         <th>{{ invoice.ProductName }}</th>
         <th>${{ invoice.UnitPrice }} </th>
         <th>{{ invoice.Quantity }} </th>
         <th>${{ invoice.ExtendedPrice }} </th>
       </tr>
   </table>
</div>

最好在行中使用 "ng-repeat" 而不是在 table 标签中。

Answer 2

Check this plunkr

我参加了json:

[{
        "PostalCode": "12209",
        "Country": "Germany",
        "Salesperson": "Margaret Peacock",
        "OrderID": 10692
    },
    {
        "PostalCode": "12208",
        "Country": "Germany",
        "Salesperson": "hulk",
        "OrderID": 10692
    },
    {
        "PostalCode": "485021",
        "Country": "US",
        "Salesperson": "Thor",
        "OrderID": 10693
    },
    {
        "PostalCode": "562032",
        "Country": "US",
        "Salesperson": "Spider Man",
        "OrderID": 10693
    }
]

我这里做的是基于OrderID的组数组。我用 underscore js 实现了相同的

_.groupBy(res.data,'OrderID')
然后遍历每个对象键并插入一个新数组$scope.arr.

然后嵌套ng-repeat

<div ng-repeat="orders in arr">
        <table class="table-responsive" id="invoice-items">
          <tr>
             <th>PostalCode</th>
             <th>Country</th>
             <th>Salesperson</th>
             <th>OrderID</th>
          </tr>
          <tr ng-repeat="data in orders" class="item-row">
             <th>{{ data.PostalCode }}</th>
             <th>{{ data.Country }} </th>
             <th>{{ data.Salesperson }} </th>
             <th>{{ data.OrderID }} </th>
           </tr>
       </table>
       <hr>
    </div>

在 ng-repeat 中附加结果，可能吗？

Appending results in ng-repeat, possible?

angularjs

angularjs-ng-repeat