Question

我想将我的WebApi添加到AngularJS中。我第一次尝试使用以下控制器：

    function ListCtrl($scope, $http) {

    $scope.data = [];
    $http.get('/api/Auftraege')
    .then(function (result) {

        // Success
        angular.copy(result.data, $scope.data);
    },
    function () {

        // Error
        alert("Error");
    });

}

但现在我添加了ng-table，我尝试使用其页面中的示例代码，其中包含数据硬编码。

我的问题是：

我在下面的代码中添加＆＃39; $ http.get（＆＃39; / api / Auftraege＆＃39;）＆＃39;？到目前为止，我试过的所有变化都没有。

    var app = angular.module('main', ['ngTable']).
    controller('DemoCtrl', function ($scope, $filter, ngTableParams) {

    var data = [{ name: "Moroni", age: 50 },
                { name: "Enos", age: 34 }];

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'asc'     // initial sorting
        }
    }, {
        total: data.length, // length of data
        getData: function ($defer, params) {
            // use build-in angular filter
            var orderedData = params.sorting() ?
                                $filter('orderBy')(data, params.orderBy()) :
                                data;

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

更新

这对我有用：

var app = angular.module('main', ['ngTable']);

app.controller('DemoCtrl', function ($scope, $http, $filter, ngTableParams) {

    $http.get('/api/Auftraege')
        .success(function (data, status) {
        $scope.data = data;

        $scope.tableParams = new ngTableParams({
            page: 1,            // show first page
            count: 10,          // count per page
            sorting: {
                foo: 'asc'     // initial sorting
            }
        }, {
            total: $scope.data.length, // length of data
            getData: function ($defer, params) {
                // use build-in angular filter
                var orderedData = params.sorting() ?
                                    $filter('orderBy')($scope.data, params.orderBy()) :
                                    $scope.data;

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

});

Answer 1

你应该看看他们拥有的ajax example。 getData函数看起来像这样：

getData: function($defer, params) {
        // ajax request to api
        Api.get(params.url(), function(data) {
            $timeout(function() {
                // update table params
                params.total(data.total);
                // set new data
                $defer.resolve(data.result);
            }, 500);
        });
    }

您可以在该功能中进行get来电，并使用api请求中$defer.resolve功能中的数据拨打then。如下所示：

getData: function ($defer, params) {
    $http.get('/api/Auftraege')
    .then(function (result) {

        //do whatever data processing you need to do here

        //update the total items
        params.total = result.data.length
        //resolve the deferred object with your data, so ng-table can update
        $defer.resolve(result.data);
    },
    function () {
        // Error
        alert("Error");
    });

}

我还要记住，您可能应该将数据访问抽象到服务中，而不是在控制器中进行http调用。（也许你已经完成了这个，这是简化的代码）。

AngularJS，在哪里添加$ http.get

1 个答案: