javascript - 在 Angular Controller 中重新渲染 ng-table

Question

我面临着 ng-table 的一个相当奇怪的问题。这是我的 Controller 中的一些代码的摘录

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 全部被注入(inject)

在用户界面上，我有一个下拉菜单，如下所示:

<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>

这就是我面临的问题的本质:表格第一次呈现良好/正常。当我更改类别下拉列表上的选择时，会调用 getApplications ，甚至执行 _this.tableParams = new NgTableParams 行(我已通过代码进行调试以确认它和服务调用执行时没有错误)。但是，getData 不知何故不会触发，因此 UI 上没有任何变化。我广泛使用了 ng-table，但这是我第一次以这种方式重新渲染它。我缺少什么？ 为了避免疑问，某处有 controllerAs: vm 。

Answer 1

不知道为什么上面的代码不起作用，但对 Controller 中的逻辑进行一些重组使其可以工作:

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() 放在其他几个地方，但它不起作用