NgTable 매개 변수를 사용하여 AJAX를 통해 JSON로드

Question

ngTables를 사용하여 AJAX 호출을 사용하여 데이터를 정렬하고 필터링하려고합니다. 현재 ng-repeat를 사용하여 데이터를 복제 할 수 있지만 정렬 기능은 적용되지 않습니다. 이 예제 http://plnkr.co/edit/zuzcma?p=info을 참조하고 mock.js 파일을 사용하여 작동하도록 만들었지 만 지금 당장 나는 내 웹 서버에로드 한 파일을 사용하고 있으며 제대로 작동하지 않는 것 같습니다.

답변이 매우 간단하고 도움이된다고 확신합니다. 내 컨트롤러 및 HTML 파일의 모습을 보여주기 위해 마크 업을 첨부했습니다. 더 이상 필요한 정보가 있으면 언제든지 알려 주셔서 감사합니다.

다음은 내가 참조하는 API에 대한 링크입니다.

http://bazalt-cms.com/ng-table/

는

http://bazalt-cms.com/ng-table/example/6

HTML은 :

<div ng-controller="myController"> 
    <table ng-table="tableParams" show-filter="true" class="table table-condensed"> 
    <tr ng-repeat="user in data"> 
     <td data-title="foo" sortable="foo">{{user.foo}}</td> 
     <td data-title="bar" sortable="bar">{{user.bar}}</td> 
    </tr> 
    </table> 
</div> 

컨트롤러 :

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

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

$http.get('http://jsondata.com/myjson.json') 
    .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: 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())); 
    } 
    }); 
}); 

Answer 1

첫 번째 단계는 폴리 우레탄이고 t은 정렬 속성의 주위에 인용 :

<td data-title="foo" sortable="'foo'">{{user.foo}}</td> 

ngTable가 식을 기대하고있다.

두 번째 단계는 사용중인 ngTable의 버전을 확인하는 것입니다, 그것은 0.3.2 체크 아웃이 ngTable 문제의 경우 : https://github.com/esvit/ng-table/issues/204이

$가 연기

Answer 2

이 필요로하는 행운을 빕니다)는 내에 해결 될 수 getData, ajax 호출이 완료된 후. 예에서 당신은 제공으로, 아약스 호출은 GetData의 내부 :

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

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

$scope.tableParams = new ngTableParams({ 
    page: 1,   // show first page 
    count: 10,   // count per page 
    sorting: { 
     foo: 'asc'  // initial sorting 
    } 
}, { 
    total: data.length, // length of data 
    getData: function($defer, params) { 
     $http.get('http://jsondata.com/myjson.json') 
      .success(function(data, status) { 

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

Answer 3

당신에게 문제가 당신이 당신의 ngTableParams 내부와 당신이 success 기능의 범위를 벗어난다 같은 시간에 지역 변수 데이터를 사용한다는 것입니다.

은 다음과 같이 뭔가 코드를 변경

:

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

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

$http.get('http://jsondata.com/myjson.json') 
    .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())); 
     } 
     }); 
    }); 


}); 

이 ngTableParams 내부 $scope.data에 data에서 변경 사항을 참조하십시오.

힌트 : 당신이 당신이 당신의 success 함수 내에서 ngTableParams, $scope.data에 data을 변경하지 않고, 너무 일 것입니다 배치합니다. 그러나 변수를 변경하면 reload() 테이블을 원한다면 더 나은 유연성을 제공합니다.

Answer 4

<tr ng-repeat="user in $data"> 
     <td data-title="foo" sortable="foo">{{user.foo}}</td> 
     <td data-title="bar" sortable="bar">{{user.bar}}</td> 
</tr> 

직접 $scope.data = data에 JS에서 필요 데이터를 참조 할 수 있습니다. 나는 나를 위해 잘하고 노력했다.