angularjs - 如何为智能表创建折叠行？

Question

我正在尝试在我的智能表中实现折叠行。这是一个只有在用户想要显示更多细节时才可见的行。这就是它现在的样子：

   <table st-table="displayed" class="table table-striped">
    <thead>
    <tr>
        <th st-ratio="20" st-sort="firstName">first name</th>
        <th st-ratio="20" st-sort="lastName">last name</th>
        <th st-ratio="10" st-sort="age">age</th>
        <th st-ratio="30" st-sort="email">email</th>
        <th st-ratio="20" st-sort="balance">balance</th>
    </tr>
    </thead>
    <tbody>

    <input type="checkbox" ng-model="show"/> {{show}}

    <tr ng-repeat="row in displayed">
        <td st-ratio="20">{{row.firstName}}</td>
        <td st-ratio="20">{{row.lastName | uppercase}}</td>
        <td st-ratio="10">{{row.age}}</td>
        <td st-ratio="30">{{row.email}}</td>
        <td st-ratio="20">{{row.balance | currency}}</td>

    </tr>
    <tr ng-show="show">
        <td>hallo</td>
    </tr>

    </tbody>
    <tfoot>
    <tr>
        <td colspan="5" class="text-center">
            <div  st-items-by-page="20" st-pagination=""></div>
        </td>
    </tr>
    </tfoot>
</table>

有没有办法显示这个表的折叠细节行？

plunkr 参考：http ://plnkr.co/edit/8lSx2v?p=preview

Answer 1

<table st-table="displayed" class="table table-striped">
      <thead>
        <tr>
          <th st-ratio="20">#</th>
        	<th st-ratio="20" st-sort="firstName">first name</th>
        	<th st-ratio="20" st-sort="lastName">last name</th>
        	<th st-ratio="10" st-sort="age">age</th>
        	<th st-ratio="30" st-sort="email">email</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat-start="row in  displayed">
          <td>
            <button ng-if="row.expanded" ng-click="row.expanded = false" class="btn btn-xs btn-default glyphicon glyphicon-chevron-down"></button>
            <button ng-if="!row.expanded" ng-click="row.expanded = true" class="btn btn-xs btn-default glyphicon glyphicon-chevron-right"></button>
          </td>
          <td st-ratio="20">{{row.firstName}}</td>
        	<td st-ratio="20">{{row.lastName | uppercase}}</td>
        	<td st-ratio="10">{{row.age}}</td>
        	<td st-ratio="30">{{row.email}}</td>
        </tr>
        <tr ng-if="row.expanded" ng-repeat-end="">
          <td colspan="2">
              <b>Balance<br /></b>
          </td>
          <td colspan="3" st-ratio="20">{{row.balance | currency}}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5" class="text-left">
            <div st-items-by-page="5" st-pagination=""></div>
          </td>
        </tr>
      </tfoot>
    </table>

Answer 2

您可以使用 调用函数ng-change，然后在其中展开displayd数组。

就像我在plunker中所做的那样：

        var limitVers = [];
        for (var j = 0; j < 50; j++) {
            limitVers.push(createRandomItem());
        }
        var addedItems = [];
        for (var k = 0; k < 20; k++) {
            addedItems.push(createRandomItem());
        }

        var expaVers = limitVers.concat(addedItems);
        $scope.displayed = limitVers;

        $scope.update = function(show){
          show ? $scope.displayed = expaVers : $scope.displays = limitVers;
        }