Данные ng-таблицы не отображаются при загрузке страницы

Я интегрировал ngTable в свой стек mean.io, и у меня возникли проблемы с заполнением таблицы при загрузке страницы. Если я выберу один из заголовков столбцов, данные отобразятся, и таблица будет работать, как заявлено.

Вот мой html

<table ng-table="tableParams" class="table">
    <tbody ng-repeat="p in $data">
    <tr id="tr{{p._id}}" ng-class-odd="'odd'" ng-class-even="'even'">
        <td class="rowTd" data-title="'Task Code'"   sortable="'task_code'">{{p.task_code}}</td>
        <td class="rowTd" data-title="'Task Name'"    sortable="'task_name'">{{p.task_name}}</td>
        <td class="rowTd" ><input type=button id="editRowBtn{{p._id}}" value="edit"
                                  ng-click="setEditId(p._id)"></td>
    </tr>
    <tr ng-show="editId===p._id" ng-if="editId===p._id">
        <td colspan="7" ng-include src="'editRow.html'"></td>
    </tr>
    </tbody>
</table>

Вот мой код контроллера.

    var data = GeneralTasks.query();

    $scope.tableParams = new ngTableParams({
        page: 1,
        count: 10
    },{
        total: data.length,
        getData: function($defer, params) {
            params.total(data.length);
            $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });

    $scope.editId = -1;

    $scope.setEditId =  function(pid) {
        $scope.editId = pid;
    };

Я новичок в использовании этой таблицы, поэтому я уверен, что есть что-то, что я упускаю из виду.


angularjs ngtable mean.io
person user3294791    schedule 21.03.2015    source источник
comment
Что возвращает GeneralTasks.query(): обещание или массив данных?   -  person GregL    schedule 22.03.2015
comment
Он возвращает массив данных.   -  person user3294791    schedule 22.03.2015

Ответы (1)


arrow_upward
0
arrow_downward

Хотел дать ответ на свой вопрос, чтобы он мог помочь другим. Каждый раз, когда элемент в таблице добавляется или удаляется, таблица должна быть перезагружена. Поскольку $save и $remove вызывают функцию обратного вызова, просто вставьте следующее для обновления таблицы.

    $scope.add = function() {
        if (!$scope.tasks) $scope.tasks = [];

        var task = new GeneralTasks({
            task_code: $scope.task_code,
            trade: $scope.trade,
            task: $scope.task,
            task_name: $scope.task_name
        });

        task.$save(function(response) {
            $scope.tasks.push(response);

            var data = $scope.tasks;
            $scope.tableParams.total(data.length);
            $scope.tableParams.reload();
        });

        this.task_code = this.trade = this.task = this.task_name = '';
    };

Сначала я обновляю список $scope ответом, а затем обновляю данные и длину таблиц. Затем просто вызовите перезагрузку.

Как я уже говорил ранее, я делаю это для $save и $remove. Вот код $remove.

    $scope.remove = function(task) {
        for (var i in $scope.tasks) {
            if ($scope.tasks[i] === task) {
                $scope.tasks.splice(i, 1);
            }
        }

        task.$remove();
        var data = $scope.tasks;
        $scope.tableParams.total(data.length);
        $scope.tableParams.reload();
    };

Я заметил, что когда я редактирую имя в списке, а затем отменяю его, имя не сбрасывается. Я полагаю, что мне следует добавить аналогичный код для действия отмены, но я ленив, и это пока меньше всего меня беспокоит. :)

Надеюсь, это поможет кому-то еще.

person user3294791    schedule 09.04.2015