-->

ng-Table Grouping: Open only row at a time

2019-08-07 11:07发布

问题:

I'd to display only one open row at a time in ng-Table. At present, if a row is opened then it will stay open until the user collapses it manually. As each new row is opened, there is more and more data on display.

I'm using this code to initiate the table with all rows closed, but I'm stumped at how to keep only one row closed.

app.controller('groupCtrl', function($scope) {
   $scope.group.$hideRows = true;
});

This plunkr shows the progress to date (http://plnkr.co/edit/2ABVrN?p=preview).

Ted

回答1:

The idea to pass all groups to individual group controller and collapse all expanded groups except selected

view html:

<tbody ng-repeat="group in $groups | orderBy:'value'"  sortable="'sortletter'" 
  ng-controller="groupCtrl">
  <tr class="ng-table-group">
    <td colspan="{{$columns.length}}">
      <a href="" ng-click="switchGroup(group, $parent.$groups)">

groupCtrl:

app.controller('groupCtrl', function($scope) {
  //console.log($scope); 
  $scope.group.$hideRows = true;
  //     console.log("scope.group.$hideRows"+$scope.group.$hideRows);

  $scope.switchGroup = function(group, groups){
    if(group.$hideRows){
      angular.forEach(groups, function(g){
        if(g !== group){
          g.$hideRows = true;
        }
      });
    }

    group.$hideRows = !group.$hideRows;
  };
});    

Plunker