Группировка ng-table - инициализировать с минимизированными строками

Я использую пример группировки ng-таблицы из http://plnkr.co/edit/CBcbkc.

Прямо сейчас таблица инициализируется с расширенными строками, но я бы хотел, чтобы они были сведены к минимуму, поскольку у меня более 100 записей. Как я могу это сделать?


angularjs ngtable
person dopplesoldner    schedule 14.03.2014    source источник

Ответы (3)


arrow_upward
10
arrow_downward

Вы можете установить для group.$hideRows значение true, используя ngInit:

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

Обновление
Я хотел найти лучшее решение, поскольку в документации по angular не рекомендуется использовать ngInit для доступа к переменным области видимости.

Вы можете создать контроллер для каждой группы, созданной в ng-repeat:

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

Затем вы можете напрямую обращаться к групповому объекту. Одним из преимуществ этого будет возможность условного расширения группы:

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

http://plnkr.co/gXfsBq

К вашему сведению
Мне интересно, почему я не могу найти никаких ссылок на $hideRows в источнике. Оказывается, объект группы не имеет свойства $hideRows до тех пор, пока он не будет нажат. Чтобы доказать это, я заменил $hideRows выдуманным именем, и оно сработало точно так же.

  <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">

Неудивительно, что вы не смогли найти способ его инициализировать.

person j.wittwer    schedule 15.03.2014
comment
это отличный ответ - спасибо за это. быстрый дополнительный вопрос: пейджер + группировка не очень хорошо работают вместе в ng-table. скажем, у вас есть таблица с 2 группами, по 50 строк в каждой, и вы инициализируете с сокращенными группами и размером пейджера 10 - таблица покажет вам только одну строку: первая группа, это не так, пока вы не включите пейджер ограничение до числа, которое достигает следующей группы, которую вы увидите в других группах. это проблематично, и мне было интересно, есть ли у вас обходной путь? - person zenocon; 20.07.2014
comment
мой обходной путь - отключить подкачку, но это не реальное решение для больших наборов данных. counts: [], // hide page counts control total: 1, // value less than count hide pagination - person j.wittwer; 21.07.2014
comment
Да, я должен был сделать что-то подобное. Что ж, с группировкой, сжатой при начальной загрузке, все не так плохо, но если количество групп становится большим, это становится проблематичным. В github зарегистрирована проблема со всем пейджером/группировкой, но похоже, что активный разработчик упал. Возможно, мне придется попытаться починить пейджер самостоятельно. - person zenocon; 22.07.2014

arrow_upward
3
arrow_downward

Вы можете указать ngTable не расширять его с помощью свойства 'groupOptions', см. ниже:

var table = new NgTableParams({ group: 'name' }, { dataset: users, groupOptions: { isExpanded: false } });
person adiii4    schedule 12.04.2017
comment
Не работает, если вы используете группировку с версией ngTable ‹ 1.0.0... :-( - person Vortilion; 13.12.2017

arrow_upward
0
arrow_downward

Просто добавьте groupOptions: {isExpanded:false} в раздел параметров.

Ниже приведена копия вашего кода с соответствующим дополнением.

$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()));
        }
    });
person helcode    schedule 26.05.2019