如何使用html和angular js创建扩展表？

Question

我想创建一个可扩展表，其中将有一个带有加号图标的标题以进行扩展，并且子项将显示在扩展部分中。

我能够创建它，但是子行不会低于正在发生的父行边界，因为我正在使用父dg.CreateGraph(YourPanelName From Form); 内部的表。因此，有没有更好的使用方法。

td

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.carList = [{
    review: 'New',
    rating: 5,
    fiveStarPercent: 100,
    recommended: 'yes',
    price: '$1,000,000',
    name: 'Row 1',
    descrt: [{
      name:'Clild 1',
      review: 'New',
      rating: 5,
      description: 'test 1',
      card: 'N',
      gift: '$1,565,650'
    }, {
      name:'Clild 2',
      review: 'New',
      rating: 5,
      description: 'test 2',
      card: 'N',
      gift: '$1,554,540'
    }, {
      name:'Clild 3',
      rating: 5,
      review: 'New',
      description: 'test 3',
      card: 'Y',
      gift: '$1,444,450'
    }]
  }, {
    review: 'Poor',
    rating: 1,
    fiveStarPercent: 10,
    recommended: 'no',
    price: '$5',
    name: 'Row 2',
    descrt: [{
      name:'Clild 1',
      review: 'New',
      description: 'test ',
      card: 'N',
      rating: 5,
      gift: '$1,025,655'
    }, {
      name:'Clild 2',
      review: 'New',
      description: 'test 2',
      card: 'Y',
      rating: 5,
      gift: '$1,545,454'
    }]

  }];
});

tr {
  cursor: pointer;
}
tr.trigger:hover td {
  background-color: #ffc !important;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

这是参考URL：plunker

Answer 1

避免使用嵌套表，这样可以解决与td宽度有关的问题

<tr class="trigger" ng-repeat-start="car in carList | filter:tableFilter" ng-click="main.activeRow = !main.activeRow">
    <td><a href="#">+</a><span style="padding:4px;">{{car.name}}</span></td>
    <td>{{car.review}}</td>
    <td>{{car.rating}}</td>
    <td>{{car.fiveStarPercent}}</td>
    <td>{{car.recommended}}</td>
    <td>{{car.price}}</td>
</tr>
<tr ng-repeat-end ng-show="main.activeRow" ng-repeat="subling in car.descrt">
    <td>{{subling.name}}</td>
    <td>{{subling.rating}}</td>
    <td>{{subling.review}}</td>
    <td>{{subling.description}}</td>
    <td>{{subling.card}}</td>
    <td>{{subling.gift}}</td>
</tr>

Demo Here

  

我不确定ng-repeat和ng-repeat-end是否能正常工作   在一起，但是他们做到了。