Как обновить NG-Table, загруженную из http-запроса, с динамическими данными

Мне нужно иметь возможность обновлять данные в моей таблице ng. Следующие изображения содержат полный сценарий использования. main viewКогда пользователь нажимает на поиск BrandID, появляется новое модальное окно: modal1

Он содержит ng-таблицу с некоторыми загруженными в нее данными. После закрытия модала я нажимаю на второй поиск(GroupID), здесь открывается такое же модальное окно с ng-таблицей, но даже если запрос в порядке и данные возвращаются с сервера, загрузка не удалась: modal2

Я хотел бы иметь возможность обновить таблицу, чтобы инициализировать ее вновь полученными данными.

Скрипт в Plunker вызывается каждый раз при переключении модального окна.


person Susy11    schedule 12.05.2014    source источник
comment
если таблица основана на модели, ее не нужно обновлять. Angular делает это автоматически (у ngRepeat есть собственные наблюдатели). Просто свяжите модель таблицы с формой Add new Product (она же formList.push(createdForm);)   -  person Maxim Shoustin    schedule 12.05.2014
comment
@Maxim Таблица не основана на ng-моделях. это модальное окно, которое отображается при поиске, пожалуйста, проверьте html plunker. Модальные окна не используются для добавления всего продукта, они используются только для добавления некоторых свойств в отдельные поля формы.   -  person Susy11    schedule 12.05.2014


Ответы (4)


Попробуйте это, чтобы обновить данные таблицы:

$scope.tableParams.reload();

Редактировать: я нашел возможную ошибку в вашем коде... Я думаю, вы должны изменить это:

var orderedData = params.sorting() ?
   $filter('orderBy')(filteredData, params.orderBy()) :
   $scope.datay;

к этому:

var orderedData = params.sorting() ?
   $filter('orderBy')(filteredData, params.orderBy()) :
   filteredData;

Это работает лучше?

person erikt    schedule 12.05.2014
comment
Привет, решение не работает, потому что, если я перезагружу таблицу перед инициализацией новыми данными, она выдаст ошибку неопределенных данных. - person Susy11; 12.05.2014
comment
Спасибо за ваш ответ, но он все еще не решает проблему. Я нашел обходной путь, который я опубликую в ответе. - person Susy11; 13.05.2014

Решение проблемы можно найти здесь. Это не очень хорошее решение, но на данный момент это лучшее. Принудительно задавая различный счет для каждого запроса, таблица перезагрузит свои данные, и вы получите желаемый результат. Новый Plunk можно найти здесь. Обратите внимание на важность разного количества на странице. для каждого запроса. Если для свойства count задано то же число, решение завершится ошибкой. Я надеюсь, что это проясняет ситуацию, и я также надеюсь, что разработчики ng-table исправят эту проблему.

person Susy11    schedule 13.05.2014

Этот пример кода, кажется, работает, пожалуйста, проверьте этот вопрос SO для получения дополнительных объяснений: ">ng-table не работает с динамическими данными

// Get data from factory
var data = dataFactory.query();

//Use promise to load data to table, note the replacing of the second tableParams 
//object parameter with a function
data.$promise.then(function (data){
    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,
        sorting: {
            name: 'asc'
        },
        filter: {
            name: undefined             
        }
    }, resetTableParams()
    );
});

//The function that replaces the tableParams param
var resetTableParams = function(){
    return {
        total: data.length,
        getData: function($defer, params) {
            var filteredData = params.filter() ? $filter('filter')(data,    params.filter()) : data;
        var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData; 

        params.total(orderedData.length);
        $defer.resolve($scope.data = orderedData.slice((params.page() -1) * params.count(), params.page() * params.count()));           
        }
    }
}

//A method to update the table that can be called when closing a modal
var updateTable = function(){
    data = dataFactory.query();
    data.$promise.then(function (data){
        $scope.tableParams.reload();
    });
}

// Add table row to table in modal and call updateTable() on closing modal
$scope.addRow = function(){
    var modalInstance = $modal.open({
        templateUrl: 'resources/partials/newrecord.html',
        controller: NewRecordModalCtrl
    })

    modalInstance.result.then(function(){
        updateTable();
    });
}
person jvdp    schedule 19.08.2014

Ребята, теперь я поддерживаю этот репозиторий и, наконец, проблема исправлена ​​в v0.4.2!

person iyel    schedule 15.01.2015
comment
Привет, где в этом репо пример или объяснение? - person David Williams; 18.03.2015