Question

我已将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;
    };

我是新手使用这张桌子，所以我确定有一些我可以忽视的东西。

Answer 1

想要提供我的问题的答案，这样可以帮助别人。无论何时添加或删除表中的项，都必须重新加载表。由于$ 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();
    };

我注意到当我在列表中编辑名称然后取消时，名称不会重置。我想我应该为取消操作添加类似的代码，但我很懒，这是我现在最担心的问题。：）

希望这有助于其他人。

页面加载时未显示ng-table数据

1 个答案: