Question

尝试使用AngularJS从Northwind数据集设置一个简单的发票集合。有几个单独的项目由相同的OrderID连接 - 我想在同一个表中显示这些。这可能是使用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

＆＃34;纳克重复＆＃34;通常用于填充一个表，就像这样：

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

更好地使用＆＃34; ng-repeat＆＃34;在行中而不是在表标记中。

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中附加结果吗？

2 个答案: