在 angular 控制器中重新渲染 ng-table

Question

我正面临一个与 ng-table 相当奇怪的问题。这是我控制器中一些代码的摘录

this.category = "Open";
this.category = ["Open", "Accepted", "Rejected"];
this.dataItems = [];

var _this = this;

this.$scope.$watch("vm.category", function(category) {
    _this.dataItems.length = 0; // To clear items already in the array  

    svc.getApplications(category).then(
        function(okResult) {
            angular.copy(okResult.data, _this.dataItems);

            _this.tableParams = new NgTableParams(
            {
                page: 1,
                count: 5,
                sorting: {
                    applicationDate: 'desc'
                }
            },
            {
                total: _this.dataItems.length,
                getData: function ($defer, params) {
                    var filtered = params.filter() ? _this.$filter('filter')(_this.dataItems, _this.filter) : _this.dataItems;
                    var ordered = params.sorting() ? _this.$filter('orderBy')(filtered, params.orderBy()) : filtered;

                    params.total(ordered.length);
                    if (params.total() < (params.page() - 1) * params.count()) {
                        params.page(1);
                    }

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

显然，为了简洁起见，我省略了相当多的代码。 $scope、$filter、NgTableParams 都在注入

在 UI 上，我有一个下拉列表如下：

<select id="cbCategory" class="form-control" data-ng-model="vm.category" data-ng-options="category for category in vm.categories"></select>

和ng-table如下：

<table class="table table-striped table-hover" id="tb1" data-ng-table="vm.tableParams">
    <tbody>
        <tr data-ng-repeat="item in $data">
            <td data-title="'Email'" data-filter="{ email: 'text' }" data-sortable="'email'">{{item.applicant.email}}</td>
            <!-- more... -->
        </tr>
    </tbody>
</table>

这是我面临的问题的本质： table 第一次呈现 fine/okay。当我更改类别下拉列表中的选择时，会调用 getApplications，甚至会执行 _this.tableParams = new NgTableParams 行（我已通过代码进行调试以确认它并且服务调用执行时没有错误）。然而，getData 不知何故没有触发，所以 UI 没有变化。我广泛使用了 ng-table 但这是我第一次以这种方式重新渲染它。我错过了什么？为了避免疑义，某处有controllerAs: vm。

Answer 1

不确定为什么上面的代码不起作用，但对控制器中的逻辑进行一些重组使其起作用：

this.category = "Open";
this.category = ["Open", "Accepted", "Rejected"];
this.dataItems = [];

var _this = this;

_this.tableParams = new NgTableParams(
{
    page: 1,
    count: 5,
    sorting: {
        applicationDate: 'desc'
    }
},
{
    total: _this.dataItems.length,
    getData: function ($defer, params) {
        var filtered = params.filter() ? _this.$filter('filter')(_this.dataItems, _this.filter) : _this.dataItems;
        var ordered = params.sorting() ? _this.$filter('orderBy')(filtered, params.orderBy()) : filtered;

        params.total(ordered.length);
        if (params.total() < (params.page() - 1) * params.count()) {
            params.page(1);
        }

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

this.$scope.$watch("vm.category", function(category) {
    _this.dataItems.length = 0; // To clear items already in the array  

    svc.getApplications(category).then(
        function(okResult) {
            angular.copy(okResult.data, _this.dataItems);

            // ADDED THIS...
            if (_this.tableParams) {
                _this.tableParams.reload();
            }
    });

请注意，我尝试将 reload() 放在其他几个地方，但没有用

在 angular 控制器中重新渲染 ng-table

Re-rendering ng-table in an angular controller

javascript

angularjs

ngtable