ngTable将不会重新加载数据

Question

I'm an experienced C# and MVC programmer, but just starting out with AngularJS. I've been using ngTable (trying to anyway) with limited success, but one issue I cannot resolve - no matter what I do, I cannot get a particular table to refresh when the data has changed.

I'm getting data from a Web API via a factory - it's a list of suppliers associated with a particular Product. The first time the screen is loaded, the data is brought back and the table displays fine - any subsequent call, the data is returned, but the table is not updating. Other areas of the page are updating as expected.

I've done some console logging, and can see that the data is coming back. I've tried the tableParams.reload() function, and setting the tableParams.total() but nothing seems to trigger the table to refresh.

This is my function in the Controller:

function getStockSupplier() {
        console.log("getStockSupplier()");
        $scope.stockSupplierTableParams = {};

        stockSupplier.getAll({ url: "localhost:52457", sku: $scope.model.sku })
            .$promise.then(function (response) {
                $scope.stockSupplier = response;

                $scope.stockSupplierTableParams = new NgTableParams({
                }, {
                    dataset: response
                });

                console.log("Got result");
                console.log("Length: " + $scope.stockSupplierTableParams.settings().dataset.length);

                $scope.stockSupplierTableParams.reload();

            }, function (response) {
                alert('no stock item');
                $scope.stockSupplier = null;
            });
    }

And this is my HTML code:

<div ng-controller="stockController">
        <div>
            <table ng-table="stockSupplierTableParams" class="table table-condensed table-bordered table-striped">
                <tr ng-repeat="issue in $data">
                    <td data-title="'Supplier1'">
                        {{issue.SupplierName}}
                    </td>
                    <td data-title="'On Order'">
                        {{issue.OnOrder}}
                    </td>
                </tr>

            </table>
        </div>
    </div>

I'm at a complete loss - it may be something fundamental I'm missing, but it's driving me crazy, so any help great appreciated.

EDIT: Here's the code for the Web API Service call, in case that has any relevance. Also, I should point out that the HTML above is used in a Directive, if that makes any difference.

var myService = angular.module('myService', ['ngResource']);
myService.factory('stockSupplier', [
    '$resource',
    function ($resource) {
        return $resource('http://:url/api/StockInfo?Sku=:sku&StockSupplier=true',
            {
                url: '@url',
                sku: '@sku'
            },
            {
                getAll: {
                    method: 'GET',
                    isArray: true
                },
            });
    }
]);

Answer 1

I have a simple solution, you can re-render table when data loaded:

HTML

 <div ng-controller="stockController">
    <div data-ng-if="tableIsReady">
        <table ng-table="stockSupplierTableParams" class="table table-condensed table-bordered table-striped">
            <tr ng-repeat="issue in $data">
                <td data-title="'Supplier1'">
                    {{issue.SupplierName}}
                </td>
                <td data-title="'On Order'">
                    {{issue.OnOrder}}
                </td>
            </tr>

        </table>
    </div>
    <div data-ng-if="!tableIsReady">
       // you can put loader here
   </div>
</div>

JS

 function getStockSupplier() {
    console.log("getStockSupplier()");
    $scope.stockSupplierTableParams = {};

    $scope.tableIsReady = false; // here we hide table, and show loader

    stockSupplier.getAll({ url: "localhost:52457", sku: $scope.model.sku })
        .$promise.then(function (response) {
            $scope.stockSupplier = response;

            $scope.stockSupplierTableParams = new NgTableParams({
            }, {
                dataset: response
            });

            console.log("Got result");
            console.log("Length: " + $scope.stockSupplierTableParams.settings().dataset.length);

            $scope.stockSupplierTableParams.reload();

            $scope.tableIsReady = true; // here we show table again

            $scope.$apply() // start digest

        }, function (response) {
            alert('no stock item');
            $scope.stockSupplier = null;
        });
}

Otherwise, you code is fine, you just may be forget put $scope.$apply() after $scope.stockSupplierTableParams.reload();

Answer 2

I got it working! Though I'm not 100% sure how, so if any experienced Angular developers could explain it, I would be grateful. There are two parts to it.

Basically - instead of setting the dataset to the response object of the API call, I set it to the variable $scope.stockSuppler . Then, I explicitly empty this variable before the update - code below:

function getStockSupplier() {
        console.log("getStockSupplier()");
        $scope.tableIsReady = false;
        $scope.stockSupplierTableParams = {};
        $scope.stockSupplier = [];

        stockSupplier.getAll({ url: "localhost:52457", sku: $scope.model.sku })
            .$promise.then(function (response) {
                $scope.stockSupplier = response;

                $scope.stockSupplierTableParams = new NgTableParams({
                }, {
                    dataset: $scope.stockSupplier
                });

                console.log("Got result");
                console.log("Length: " + $scope.stockSupplierTableParams.settings().dataset.length);
                $scope.stockSupplierTableParams.reload();
                $scope.tableIsReady = true;
            }, function (response) {
                alert('no stock item');
                $scope.stockSupplier = null;
            });
    }

Also, I removed the ngController="stockController" from the directive HTML code - the directive is called in a div which already defined the controller. Having the controller defined twice appears to have been confusing it as well. I should emphasis that only be making both of these changes, I got to to work. One or the other only, it still doesn't work correctly.

The table is now updating as expected with the other parts on the page.

I'm not sure why using the scope variable rather than the response from the API makes a difference, but it's done the trick.