javascript - 如何按 Angular 表中的属性(该属性具有单个 rownspan)进行分组？

Question

我没有找到这个问题的正确标题。

我的问题是:例如，我有一个包含两列的表，列汽车品牌和列汽车型号。我希望表格是:

就像这张图一样

换句话说，品牌名称只会出现 1 次。

我的输入数组采用以下 json 格式:

[{"brand":"Audi","model":"A1"}, 
{"brand":"Audi","model":"A2"}, 
{"brand":"Audi","model":"A3"}, 
{"brand":"BMW","model":"3 Series"}, 
{"brand":"BMW","model":"5 Series"}]

我不知道如何在 angularjs 中实现

Answer 1

这是一种使用 groupBy 过滤器显示它的方法。

angular.module('app',['angular.filter'])
  .controller('MainController', function($scope) { 
    $scope.cars = [{
    "brand": "Audi",
    "model": "A1"
  }, {
    "brand": "Audi",
    "model": "A2"
  }, {
    "brand": "Audi",
    "model": "A3"
  }, {
    "brand": "BMW",
    "model": "3 Series"
  }, {
    "brand": "BMW",
    "model": "5 Series"
  }];
 });

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>

<div ng-app="app" ng-controller="MainController"> 
  <table>
    <tbody ng-repeat="(key, value) in cars | groupBy: 'brand'">
      <tr>
        <td rowspan="{{value.length}}">{{key}}</td>
        <td>{{value[0].model}}</td>
      </tr>
      <tr ng-repeat="car in value" ng-if="!$first">
        <td>{{car.model}}</td>
      </tr>    
    </tbody>
  </table>
</div>