Ng-table: tableParams.reload () не перезагружает данные фильтра

Созданный на 27 янв. 2014  ·  30Комментарии  ·  Источник: esvit/ng-table

Я использую tableParams.reload () (и params.total (filterData.length)), который перезагружает таблицу с новыми внешними данными, но выбор в фильтрах «select» и «select-multiple» не меняется. tableParams.reload () должен снова вызывать функции "filter-data", не так ли? есть ли другой способ добиться этого?

Самый полезный комментарий

Мои данные успешно загружены в DOM, но когда я получаю данные с сервера и хочу обновить ng-таблицу с помощью tableParams.reload (), это не отражает результат, но когда я нажимаю на сортировку или разбиение на страницы, это отражает результат.
какая проблема может быть в этом?

Все 30 Комментарий

Всем привет. Прежде всего - спасибо за проект.
У меня точно такая же проблема. Мне нужно обновить фильтры данными, полученными с сервера, но я не знаю, как запустить функцию фильтрации данных.

Я обнаружил, что если вы объявляете свои данные прямо в функции getData, кажется, что таблица обновляется.
Итак ..... getData: function ($ defer, params) {
var data = $ scope.yourdata;
var orderData = ...............................
}

Мои данные успешно загружены в DOM, но когда я получаю данные с сервера и хочу обновить ng-таблицу с помощью tableParams.reload (), это не отражает результат, но когда я нажимаю на сортировку или разбиение на страницы, это отражает результат.
какая проблема может быть в этом?

Я хотел бы поддержать то, что предложил

Была такая же проблема с @developersatish.
Подождите, пока эта проблема не разрешится.

Всем привет. Я только недавно начал использовать ngTable. У меня аналогичная проблема, особенно с вложенными ngTables и перезагрузкой данных отдельно от родительских данных. вот небольшая идея:

родительский контроллер:

var parentData = [...];

$ scope.details = -1

$ scope.showDetails = function (id) {
$ scope.details = id;
};

// таблица ngTable ////////
$ scope.tableParams = new ngTableParams ({
page: 1, // показать первую страницу
count: 10, // количество на странице
сортировка: {
id: 'asc' // начальная сортировка
}
}, {
total: parentData.length, // длина данных
getData: function ($ defer, params) {
// использовать встроенный угловой фильтр
var OrderData = params.sorting ()?
$ filter ('orderBy') (parentData, params.orderBy ()):
parentData;
$ defer.resolve (orderData.slice ((params.page () - 1) * params.count (), params.page () * params.count ()));
}
});

в html у меня есть ng-click, чтобы отправить туда идентификатор и изменить область подробностей.

Дочерний контроллер (дополнительная таблица, относящаяся к первому контроллеру):

var childData = [...];

$ scope. $ parent. $ watch ('детали', function () {
console.log («вы сделали это здесь»);
$ scope.tableParams2.reload ();
});

// дочерний ngTable ////////
$ scope.tableParams2 = новый ngTableParams ({
page: 1, // показать первую страницу
count: 10, // количество на странице
сортировка: {
id: 'asc' // начальная сортировка
}
}, {
total: childData.length, // длина данных
getData: function ($ defer, params) {
// использовать встроенный угловой фильтр
var OrderData = params.sorting ()?
$ filter ('orderBy') (childData, params.orderBy ()):
childData;
$ defer.resolve (orderData.slice ((params.page () - 1) * params.count (), params.page () * params.count ()));
},
$ scope: {$ data: {}}
});

Я вижу изменение, когда нажимаю, но моя дочерняя таблица не обновляется. Не уверен, что это помогает, но я думаю, что это связано.

Привет,
У меня те же проблемы, что и у @developersatish. Данные таблицы обновляются только после сортировки или фильтрации таблицы. Есть ли решение этой проблемы?

У меня похожая проблема.

При событии щелчка я начинаю получать данные с сервера (несколько вызовов).
Итак, у меня есть цикл for, и там у меня есть запросы GET, и я сохраняю результаты, которые возвращаются в переменную области видимости, которую я хочу отобразить в таблице async.

Однако при щелчке я создаю экземпляр своей таблицы так:

`$scope.tableParams = new ngTableParams({
        page: 1, // show first page
        count: 10, // count per page
        sorting: {
            Country: 'asc' // initial sorting
        }
    }, {
        total: $scope.continentTableData.length, // length of data
        getData: function($defer, params) {
            for (var i = 0; i < numberOfCountries; i++) {
                try {
                    var country = $("path[class*=" + $scope.currentContinentCountries[i].toUpperCase() + "]")[0].__data__.properties.name;
                    MapService.getInfographicsData(2013, country, function(infrographicsData) {
                        counter++;
                        // debugger;
                        var cpi = infrographicsData[0].data.CPI;
                        var trace = infrographicsData[1].data;
                        var countryName;

                        if (cpi == null) {
                            countryName = trace.Ref_Country;
                        } else {
                            countryName = cpi.Country;
                        }

                        var joinedData = {
                            Country: countryName,
                            Cpi: cpi,
                            Trace: trace
                        }
                        $scope.continentData.push(joinedData);

                        $scope.continentTableData = $scope.continentData;

                        // if (counter==numberOfCountries-1) {
                        //     console.log("tier");
                            $timeout(function() {
                            // update table params
                            params.total($scope.continentTableData.length);
                            // set new data
                            console.log("new data set");
                            $defer.resolve($scope.continentTableData);
                        }, 1500);
                        // };

                    });
                } catch (e) {
                    // console.log(e);
                    continue;
                }                    
            }

            // $scope.$apply();
        }
    });`

как в примере ngTable с ajax. Однако в таблице ничего не отображается (getData никогда не вызывается).

Если я нажму «обновить» tableParams, таблица начнет загружать все, кроме дублирования каждого элемента.

Любая идея?

@developersatish Мне удалось отразить новые данные с сервера, скопировав функциональность, прикрепленную к кнопкам разбивки на страницы.

$scope.tableParams.count(1);

Я поместил это в обратный вызов моего запроса.

myRequest().then(function(response) {
    $scope.data = response;
    $scope.tableParams.total($scope.data.length);
    $scope.tableParams.count(1);
});

Редактировать:

В моем исходном сообщении 1 в $scope.tableParams.count(1) фактически следует заменить переменной, которая содержит значение, установленное в count в ngTableParams .
См. Http://embed.plnkr.co/harWG3J6OlNHzbOu0e6S/preview для рабочего примера.

Поскольку это лучший результат поиска по данной проблеме, я включу то, что я сделал для своего решения. Я просто сохранил в своей $ scope массив объектов {id, title}, который используется в качестве аргумента для defer.resolve в функции filter-data. (он может быть / вероятно изначально пуст.) Затем вы можете обновить этот массив в любое время, и изменения будут отражены в выбранном фильтре. Поэтому я обновляю его, когда мой вызов ajax возвращает ответ сервера.

Также в моем случае набор данных таблицы расширяется (дополняется) по мере того, как пользователь расширяет диапазон поиска. Это требует, чтобы я также изменил (применил различие) к фильтрам выбора.

Я пробовал это, но это не сработало. Вы можете вставить свой рабочий пример?

Привет, ребята,
У меня та же проблема, что и у @almaplayera , у меня есть сценарий вроде

1. Данные фильтра, используемые в раскрывающемся списке, поступают из службы.

2. И для обновления тех же данных у меня есть раздел, из которого пользователь может добавлять новые записи / обновлять существующие.

3. После добавления / обновления записей из раздела добавления / редактирования filterdata для раскрывающегося списка этот раскрывающийся список должен быть обновлен после перезагрузки таблицы.

Я делаю это, чтобы данные моей компании можно было фильтровать -

screen4ngtable

После этого я вызвал метод getCompany в данных фильтра моего представления -

screen5ngtable

Может ли кто-нибудь предложить какие-либо решения, чтобы обновить мои данные фильтра с помощью последних данных из службы или предоставить несколько примеров для аналогичного варианта использования.

@esvit : я попытался получить свои данные в обратном вызове getData в ngTablePrams и привязал их к $ scope, после этого я попытался передать ту же переменную для данных фильтра в представлении что-то вроде @israelidanny, предложенного в https://github.com/esvit / ng-table / pull / 342, но у меня это тоже не работает. :(

PS: я делаю tableParams.reload (); после добавления и редактирования.

У меня больше нет своего кода, так как я отключился от таблицы ng, прежде чем что-либо совершил. Однако по памяти:

Функции фильтра (ваша функция getCompany) вызываются только один раз при инициализации таблицы. Таким образом, вы должны применять изменения к разрешенному массиву данных всякий раз, когда есть изменения записи, и angular применяет эти изменения к dom.

$scope.company_filter = [];

$scope.getCompanyFilter = function(data) {
  var def = $q.defer();
  companyService.getAll().success(function(response) {
    $scope.updateCompanyFilter(response.data);
    def.resolve($scope.company_filter);
  });
  return def;
};

$scope.updateCompanyFilter = function(data) {
  $scope.company_filter.length = 0;
  for (i in data) {
    $scope.company_filter.push({
        'id': data[i].id,
        'title': data[i].name
    });
  }
};

// Then wherever you refresh your table data, just call updateCompanyFilter(data).
// Or you could micro manage the filter array when you do adds/deletes instead of reseeding it every time.

<td ... filter-data="getCompanyFilter($column)" >

Опять же, я могу ошибаться, так как прошло несколько месяцев.

Исправлена ​​ли эта проблема в последней версии ng-table?

Может ли кто-нибудь предоставить пример кода

Я так не думаю.

Я не думаю, что было бы слишком сложно сделать
Функция controller.loadFilterData, которую можно вызвать из
tablParams. Тогда вы сможете вызвать это, когда списки изменятся в
ваше приложение.

C

Пт, 19 июня 2015 г., 6:59, rachithaShetty [email protected]
написал:

Исправлена ​​ли эта проблема в последней версии ng-table?

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/esvit/ng-table/issues/186#issuecomment -113384084.

: +1: @kyleboyle : твое решение

Похоже, что решение этой проблемы (запрос на извлечение 403: https://github.com/esvit/ng-table/pull/403) было объединено в v0.4.2, но внесенное изменение было отменено.

В строке 549 файла ng-table.js измените

$ scope. $ watch ('params. $ params', function (newParams, oldParams) {
к
$ scope. $ watch ('[params. $ params, params.data]', function (newParams, oldParams) {

Это решило проблему с обновлением данных, но таблица не обновлялась для отображения изменений.
Похоже, что эта ошибка была повторно введена в этом коммите: https://github.com/esvit/ng-table/commit/9189e987fba90b07ffc6b17c982961ad65edf725#diff -6aca4bc06732c0635eb9860dc6cd040fL490

К сожалению, $watch 'ing params.data вызывает проблемы при определенных обстоятельствах:

когда элементы внутри params.data являются сложными и включают циклические ссылки, $watch 'ing _by value_ вызывает исключение переполнения стека, когда angular.copy создает глубокий клон.

Я считаю, что более новая версия angular.copy исправляет эту конкретную проблему, однако все еще плохая идея смотреть params.data _by value_ из соображений производительности.

@kyleboyle Этот код отлично работает! Спасибо! А добавление функции inArray может отфильтровать дубликаты.

    $scope.manufacturer_filter = [];
    $scope.getManufactFilter = function(column){
        var def = $q.defer();
        ResourseAPI.query(function(data){
            $scope.updateManufactFilter(data.devices);
            def.resolve($scope.manufacturer_filter);
        });
        return def;
    };
    $scope.updateManufactFilter= function(data) {
        var arr = [];

        angular.forEach(data, function (item) {
            if (inArray(item.manufacturer, arr) === -1) {
                arr.push(item.manufacturer);
                $scope.manufacturer_filter.push({
                    'id': item.manufacturer,
                    'title': item.manufacturer
                });
            }
        });
    };

    var inArray = Array.prototype.indexOf ?
    function (val, arr) {
        return arr.indexOf(val);
    } :
    function (val, arr) {
        var i = arr.length;
        while (i--) {
            if (arr[i] === val) return i;
        }
        return -1;
    };

@kyleboyle У вас
Кто-нибудь знает, могут ли они реализовать что-то подобное, но с использованием ng-table-dynamic?
Я загружаю столбцы динамически с помощью javascript.

Пример:

var column = {
    title: 'Example',
    sortable: 'example',
    filter: 'example',
        filterData: .....,
    show: true,
    field: 'example'
};

Что следует установить в свойстве filterData? Или есть другой способ перезагрузить фильтры данных?

Существует множество различных способов указать массив, который фильтр выбора будет использовать в качестве источника данных. Каждый из этих методов применяется как к ng-table и к ng-table-dynamic .

Может быть, следующий пример кода поможет вам что-то разобраться?

http://codepen.io/christianacca/pen/JdqjxB?editors=101

Хороший образец, но я не могу найти решение своей проблемы. Во всех примерах данные загружаются только один раз (синхронно или асинхронно), но не перезагружаются.

Вот пример того, что я получаю:
У меня есть две колонки: Страны и города, каждая с фильтром.
Так:

  • Когда фильтр страны равен нулю, сервер запрашивает все города.
  • Когда выбран фильтр страны, запрашивается у сервера единственный город, который применяется в этой стране, и обновляется столбец filterData городов.

Это понятно? Извините за мой английский.

Спасибо за ответ.

@kyleboyle, ни одно из этих решений у меня не работает (я даже не выполняю никакой фильтрации), и я считаю признаком плохого качества кода то, что таблица не обновляется, когда это делают базовые данные. На какое решение для таблиц Angular вы перешли?

@BartoGabriel Я думаю, что то, что вы пытаетесь сделать, возможно. Парень, с которым я работал, решил проблему, создав свой собственный шаблон фильтра, который делал именно то, что вы сказали. Он переопределил шаблон select.html аналогично следующему примеру: http://codepen.io/christianacca/pen/xGeWGX?editors=101

Извините, я не могу быть более полезным, просто тороплюсь!

О, кстати, парень, о котором я упоминал, использовал ui-select2

@christianacca спасибо за вашу помощь. Это было очень полезно.
Когда у меня будет решение, я поделюсь.

Прохладный :-)

Привет, ребята, мое решение полностью неверно или @kyleboyle просто лучшая альтернатива?

@telwing ваше решение не сработало для меня, но опять же, @kyleboyle тоже . Однако я на самом деле не занимаюсь какой-либо фильтрацией. Я просто сортирую данные из массива $ scope.users. Когда я удаляю элемент из этого массива и вызываю reload () для параметров таблицы, ничего не происходит. Это действительно удивительно, что что-то вроде этого настолько сложно, если я не упускаю что-то базовое.

У меня также есть те же проблемы, что и у @ developersatish.i, я также пытался установить счетчик tableParams, но мой вызов функции getdata только при загрузке страницы при фильтрации данных по раскрывающемуся списку, он не может вызвать эту функцию

$ scope.tableParams = new ngTableParams ({
page: 1, // показать первую страницу
count: 8, // количество на странице
сортировка: {
LastSeen: 'desc' // начальная сортировка
},
filter: {
PatientName: '', // начальный фильтр
},
}, {
filterSwitch: истина,
getData: function ($ defer, params) {
// использовать встроенный угловой фильтр
var filterData = params.filter ()?
$ filter ('фильтр') ($ scope.items, params.filter ()):
$ scope.items;

        var orderedData = params.sorting() ?
                            $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
        params.total(orderedData.length); // set total for recalc pagination
        $scope.tableParams.count(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

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



    }
});
Была ли эта страница полезной?
0 / 5 - 0 рейтинги