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?

回答1:

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.

回答2:

You can tell ngTable to not expand it via the property 'groupOptions' see below:

var table = new NgTableParams({ group: 'name' }, { dataset: users, groupOptions: { isExpanded: false } });

回答3:

Just add groupOptions: {isExpanded:false} in the params section.

Below is a copy of your code with the proper add-on.

$scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        groupOptions: {isExpanded:false}
    }, {
        groupBy: 'role',
        total: data.length,
        getData: function($defer, params) {
            var orderedData = params.sorting() ?
                    $filter('orderBy')(data, $scope.tableParams.orderBy()) :
                    data;

            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });

来源：https://stackoverflow.com/questions/22417789/ng-table-grouping-initialize-with-rows-minimised

标签

angularjs

ngtable