angularJs ng-table을 다시로드하는 방법

Question

나는 ng-table을 가지고 있습니다. 하나의 컨트롤러 안에 여러 개의 ng 테이블이 있습니다. ng-table = "tableParams2"또는 ng-table = "tableParams3" 등의 동적 속성을 제공하고 있습니다. 버튼 클릭 기능에 대한 AJAX 요청을 작성하여 데이터를 업데이트합니다. 내 http 요청이 백엔드에서 전송됩니다. 3 ~ 4 번 클릭하면 콘솔에 표가 다시로드됩니다. 데이터 이후에는 데이터가 일정하게 유지되고 표에 다시로드 된 콘텐츠가 표시되지 않습니다. 나는 새 데이터로 테이블을 다시로드 할 모든 클릭에

<button ng-click="qualifyX(2)" ></button> 

<div class="dragable modal hide fade ui-draggable in" id="ptn_popup" aria-hidden="false" data-backdrop="false"> 
<div class="modal-header"> 
    <a class="close" data-dismiss="modal" data-original-title="" title="">×</a> 
    <h4>Possible matched Companies</h4> 
</div> 
<div class="modal-body" style="padding: 10px;"> 
    <div id="ptn_qualify_res" class="grid-view"> 
     <div class="summary"></div> 
     <table ng-table="tableParams2" show-filter="true" class="items table table-striped table-bordered table-condensed"> 
      <tr ng-repeat="business in $data"> 
       <td data-title="'Primary Trading Name'" sortable="'primary_trading_name'" filter="{ 'primary_trading_name': 'text' }"> 
        {{business.primary_trading_name}} 
       </td> 
       <td data-title="'Primary Entity Name'" sortable="'primary_entity_name'" filter="{ 'primary_entity_name': 'text' }"> 
        {{business.primary_entity_name}} 
       </td> 
       <td data-title="'Business Name(s)'" sortable="'business_names'" filter="{ 'business_names': 'text' }"> 
        {{business.business_names}} 
       </td> 
       <td data-title="'Other Trading Name(s)'" sortable="'other_trading_names'" filter="{ 'other_trading_names': 'text' }"> 
        {{business.other_trading_names}} 
       </td> 
       <td data-title="'State'" sortable="'state'" filter="{ 'state': 'text' }"> 
        {{business.state}} 
       </td> 
       <td style="width:70px;"> 
        <a data-dismiss="modal" href="javascript:void(0)" data={{business.business_id}} class="ptn_qualify_view_link"> 
         <button type="button" class="btn btn-mini"><i class="icon-eye-open"></i> View &nbsp;</button> 
        </a> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 
<div class="modal-footer"> 
    <a data-dismiss="modal" class="btn" id="yw11" href="javascript:void(0);" data-original-title="" title="">Close</a> 
</div> 
</div> 

App.js

$scope.qualifyX = function(busID) { 
    var penModal = $('#popups_container' + busID + ' #pen_popup'); 
    var pen = $('#popups_container' + busID).next().find('input#Custombusiness_primary_entity_name').val(); 
    var selectors = {pen: pen, penModal: penModal}; 
    $http.get(getPtnData + '?ptn=' + selectors.ptn).success(function(data) { 
     selectors.ptnModal.find('#ptn_qualify_res').removeClass('grid-view-loading').addClass('grid-view'); 
     $scope['tableParams' + busID] = new ngTableParams(
       { 
        page: 1, // show first page 
        count: data.length, // count per page 
        sorting: 
          { 
           primary_trading_name: 'asc'  // initial sorting 
          } 
       }, { 
      total: 0, // length of data 
      getData: function($defer, params) { 
       var filteredData = params.filter() ? 
         $filter('filter')(data, params.filter()) : 
         data; 
       var orderedData = params.sorting() ? 
         $filter('orderBy')(filteredData, params.orderBy()) : 
         data; 

       params.total(orderedData.length); // set total for recalc pagination 
       $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
      } 
     }); 
    }); 
}; 

Plunker 다소 유사하게 만들기 :

HTML : 다음은 내 코드입니다.

Answer 1

내 테이블이 렌더링 중이지만 작업을 다시로드하지 않는 것과 비슷한 문제가 발생했습니다. 필요한 작업은 버튼을 클릭 할 때마다 $ scope.tableParams를 다시로드하는 것입니다. 이 작업을 수행하는 간단한 방법은 함수에서 $ scope.tableParams.reload()를 래핑 한 다음 버튼을 클릭 할 때 해당 함수를 호출하는 것입니다.

컨트롤러 코드 :

$scope.doSearch = function() { 
    $scope.tableParams.reload(); 
} 

HTML 코드 :

는

<button ng-click="doSearch()">Search</button> 

Answer 2

경우 다른 사람이 안타. 새 크기 배열을 만드는 필터를 직접 만들었습니다.

나는 테이블을 다시로드하기 전에 길이를 업데이트

$scope.tableParams.total(data.length)

을 사용했다.

Answer 3

마지막으로 문제가 해결되었습니다. 나는 테이블에 대한 업데이트 데이터를 받았을 때 다음과 같이

것이 필요 다시로드 테이블입니다 :

$scope.tableData = data; 

$scope.tableParams.total($scope.tableData.length); 
$scope.tableParams.reload(); 

Answer 4

이 코드는 나를 위해 작동, 는 동적 데이터를 얻을 어디 기능 -에 쓰기

$scope.tableParams.reload(); 
    $scope.tableParams.page(1); 
    $scope.tableParams.sorting({});