ng-таблица не работает для динамических данных

Question

Я создал таблицу и использую http для загрузки данных в таблицы. Таким образом, при каждом клике мои данные таблицы меняются, но я не вижу обновленных данных в таблице. Я создал образец Plunker для справки. В моем проекте, когда я нажимаю "Обновить новые данные", данные в таблице get изменяются, но после 2-3 щелчков они не меняются. Кто-нибудь знает, как это исправить..

Answer 1

Это проблема с директивой ngTable. Обновляется только когда data.length изменения. Взгляните на этот план. Я установил $scope['tableParams1'] в null и внутри $timeout Я установил новые данные. Это заставляет angularJs делать новый цикл. Таким образом, в первом цикле ngTable видит, что data.length изменена на 0, а в новом цикле ngTable видит, что data.length снова изменилась. Если вы не используете $ timeout, таблица ngTable увидит, что data.length остается такой же, как и раньше, и ничего не сделает.

Answer 2

Путем проб и ошибок я нашел, казалось бы, лучшее решение проблемы, чем указано в планах. Для ясности я использую $resource в сервисе для получения моих данных. Когда я добавляю запись через модальный режим, сначала он не загружает таблицу ng после закрытия модального режима. Я выяснил способ, который работает для меня:

// 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();
    });
}

К сожалению, я не могу дать четкого объяснения, почему это работает, а другие методы - нет. Например, если вы не используете функцию resetTableparams(), а оставляете ее жестко закодированной, таблица не обновляется. Так или иначе, циклу дайджеста Angular это нравится больше:) Если у кого-то есть хорошее объяснение, пожалуйста, поделитесь!

Answer 3

Вы можете напрямую использовать предоставленный метод $scope.tableParams.reload();

Answer 4

Чтобы решить проблему, убедитесь, что вы установили ng-controller="yourController" только один раз на вашей странице.

Код ниже не будет обновлять данные:

<div ng-controller="yourController">
  <table ng-table = "tableParams" ng-controller = "yourController">
  </table>
</div>

Решите проблему, удалив лишние ng-controller на вашей HTML-странице:

<div ng-controller="yourController">
  <table ng-table = "tableParams">
  </table>
</div>

Answer 5

Я работал над таблицами ng с динамическими данными (добавление / удаление),
Я использовал вызов ajax, чтобы внести изменения в базу данных, и success: function() {} свойство вносить изменения в tableParams
но изменения не будут отображаться на странице, если я не обновлю их, с несколькими console.log()х, я узнал, что success: function() {} на самом деле никогда не выполняет
но есть другая функция, которая всегда выполняется, complete: function() {}Я знаю, что логически неправильно помещать код, который должен работать, только после успешного вызова в complete: function() {} но если мой success: функция не работает, это исправление не так уж и плохо, особенно зная, что изменения всегда успешно вносятся в базу данных
это странно, потому что вызов успеха работает на других страницах сайта, но не на некоторых других.РЕДАКТИРОВАТЬ:
что ж, это исправление по-прежнему не решает проблему, когда длина данных не меняется, "редактируя текст в данных", как упоминалось выше, расстраивает...

$.ajax({
        type: "POST",
        url: /*some url*/,
        data: JSON.stringify({ /*some variable*/ }
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "Json",
        success: function () {  // would never execute even if it's a successful call
            console.log("success"); 
        },
        error: function() {  // optional, personally didn't try it
            console.log("error"); 
        }
        complete: function () {  //always executes regardless of the result
            console.log("complete"); 
        }
    });

Answer 6

Я не уверен в точной причине неправильного приращения, но проблема здесь может быть больше из-за подхода. Вы должны прикрепить счет к объему через $scope.count, а затем используйте ng-click директива, чтобы увеличить это: <button type="button" ng-click="count++;",

Это также облегчит вам / другим чтение и отладку, если вы вывели $scope.tableParams и данные из $scope.table1 условная вещь:

$scope.count = 0;

var dataCollections = [
    [//.. first collection],
    [//.. second collection],
    [//.. third collection],
    [//.. fourth collection]
];

$scope.data = dataCollections[0];

$scope.$watch('count', function () {
    $scope.data = $scope.count < 4 ? dataCollections[$scope.count] : dataCollections[3];
});

Я также не уверен, что у вас там происходит с $compile внутри контроллера. Это может упростить вашу задачу, если вы изучите некоторые вещи, касающиеся написания контроллеров Angular, прежде чем углубляться в использование стороннего модуля.