angularjsngtable

ng-table grouping - initialize with rows minimised


I am using the grouping example of ng-table from http://plnkr.co/edit/CBcbkc

Right now the table is initialised with rows expanded, but I would like them to be minimised as I have over 100 records. How can I do this?


Solution

  • You can set group.$hideRows to true using ngInit:

    <tbody ng-repeat="group in $groups" ng-init="group.$hideRows = true">

    Update
    I wanted to find a better solution, because the angular docs discourage using ngInit to access scope variables.

    You can create a controller for each group created in the ng-repeat:

    <tbody ng-repeat="group in $groups" ng-controller="groupCtrl">
    

    Then, you can access the group object directly. One advantage of this would be the ability to conditionally expand a group:

    .controller('groupCtrl', function($scope) {
      if ($scope.group.value != 'Administrator')
        $scope.group.$hideRows = true;
    });
    

    http://plnkr.co/gXfsBq

    FYI
    I wondered why I couldn't find any references to $hideRows in the source. It turns out that the group object doesn't have a $hideRows property until after it is clicked. To prove this, I replaced $hideRows with a made up name and it worked just the same.

      <tbody ng-repeat="group in $groups">
        <tr class="ng-table-group">
          <td colspan="{{$columns.length}}">
            <a href="" ng-click="group.invokeInvisbility = !group.invokeInvisbility">
              <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.invokeInvisbility, 'glyphicon-chevron-down': !group.invokeInvisbility }"></span>
              <strong>{{ group.value }}</strong>
            </a>
          </td>
        </tr>
        <tr ng-hide="group.invokeInvisbility" ng-repeat="user in group.data">
    

    No wonder you couldn't find a way to initialize it.