Question

我正在尝试在表格中显示第一个tr，并默认隐藏其他tr。我尝试使用ng-show和ng-hide但它不起作用。

这不是我的傻瓜，我用它来进行分组，我正在尝试上述内容。因此，默认情况下，area1应该是可见的，而area2应该是折叠的。只有在单击area2时，area1才会崩溃。

var app = angular.module('app', ['ngTable']);

app.controller('myCtl', function($scope, $timeout, NgTableParams) {

  $scope.data = [{
      uid: 'User 11',
      name: 'Name 11',
      area: 'Area 1'
    },
    {
      uid: 'User 12',
      name: 'Name 12',
      area: 'Area 1'
    },
    {
      uid: 'User 21',
      name: 'Name 21',
      area: 'Area 2'
    },
    {
      uid: 'User 22',
      name: 'Name 22',
      area: 'Area 2'
    }
  ];


  $scope.tableParams = new NgTableParams({
    group: "area"
  }, {
    dataset: $scope.data
  });


});

<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@3.3.6" />
  <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.css" />
  <script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="myCtl" ng-app="app">

    <table ng-table="tableParams" class="table table-bordered table-hover" show-group="false">
      <colgroup>
        <col width="50%" />
        <col width="30%" />
      </colgroup>
      <tr class="ng-table-group" ng-repeat-start="group in $groups">
        <td colspan="2">
          <a href="">
                  {{ group.value }}
                </a>
        </td>
      </tr>
      <tr ng-repeat="u in group.data" ng-repeat-end>
        <td title="'User ID'">{{ u.uid }}</td>
        <td title="'Name'">{{ u.name }}</td>
        <td title="'Area'">{{ u.area }}</td>
      </tr>
    </table>

  </div>
</body>

</html>

http://plnkr.co/edit/M8BcStInfSaSEaq6UVN7?p=preview plunker example

Answer 1

您可以使用包含活动行的变量来实现此目的。您将其启动到默认活动行：

$scope.visibleRow = 'Area 1';

你在 ngClick 上更新它（ng-click在ng-repeat内，所以你需要引用父范围）：

ng-click="$parent.visibleRow = group.value"

如果行与visibleRow不对应，则隐藏该行：

ng-hide="$parent.visibleRow != u.area"

Here是一名工作人员。

Answer 2

ng-repeat 提供类似$ first的属性（如果重复元素在迭代器中是第一个，则为true），$ index，$ middle和$ last。

您可以使用$ first来仅扩展第一行：）

默认情况下使用角度js中的表格分组显示第一个tr

2 个答案: