2014-05-23 2 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"); 
    }); 

} 

을하지만 지금은 겨 테이블을 추가하고, 나는 하드 코딩 된 데이터가 자신의 페이지에서 샘플 코드와 그것을 시도 : 다음 컨트롤러와 내 첫 번째 시도는했다.

내 질문은 :

나는 다음과 같은 코드 '$ 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의 기능이 다음과 같습니다 : 당신은 그 함수에 get 전화를하고, API 요청에 당신의 then 함수에서 데이터 $defer.resolve를 호출 할 수 있습니다

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

. 그래서 뭔가가 :

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

관련 문제