Search code examples
angularjsngtable

ng-Table Grouping: Open only row at a time


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


Solution

  • 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