2014-05-23 28 views
0

我想将我的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-表,我从他们的页面的示例代码中,有数据硬编码的尝试。

我的问题是:

我在哪里下面的代码了 '$ http.get('/ API/Auftraege ')' 补充的吗?到目前为止,我尝试过的所有变化都没有做到。

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())); 
     } 
    }); 
}); 

UPDATE

这为我工作:

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())); 
      } 
     }); 
    }); 

}); 

回答

2

你应该看看他们有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调用该函数并调用$defer.resolve与数据的API请求您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调用。 (也许你已经完成了这个,这是简化的代码)。

+0

谢谢!是的,这是简化的代码,我开始更多地了解AngularJS,它仅用于测试和玩耍。我会用现在适合我的东西来更新我的问题。 – oldsport