동적 데이터에 대해 ng-table이 작동하지 않습니다.

Question

테이블을 생성했으며 http를 사용하여 테이블의 데이터를로드하고 있습니다. 따라서 클릭 할 때마다 표 데이터가 변경되지만 표에 업데이트 된 데이터가 표시되지 않습니다. 참고로 샘플 Plunker을 만들었습니다. 내 프로젝트에서 새 데이터 새로 고침을 클릭하면 테이블의 데이터가 변경되지만 2-3 클릭 한 후에는 변경되지 않습니다. DId를 아는 사람은 그것을 고치는 법을 알고 있습니다.

Answer 1

ngTable 지시문에 문제가 있습니다. data.length이 변경 될 때만 업데이트됩니다. 이 plunk을보십시오. $ scope [ 'tableParams1']을 null로 설정하고 $timeout 안에 새 데이터를 설정합니다. 이로 인해 angularJs는 새로운 사이클을 수행합니다. 따라서 첫 번째 사이클에서 ngTable은 data.length가 0으로 변경된 것을보고 새 사이클에서 ngTable은 data.length가 다시 변경된 것으로 봅니다. $ timeout을 사용하지 않으면 ngTable은 data.length가 이전과 동일하게 유지되고 아무것도 수행하지 않는다는 것을 알게됩니다.

Answer 2

정확하지 않은 정확한 증가 원인에 대해서는 확신 할 수 없지만 접근법 때문에 더 많은 문제가있을 수 있습니다. 범위에 카운트를 첨부하려면 $scope.count을 입력하고 ng-click 지시문을 사용하여 숫자를 증가 시키십시오 (<button type="button" ng-click="count++;").

$scope.count = 0; 

var dataCollections = [ 
    [//.. first collection], 
    [//.. second collection], 
    [//.. third collection], 
    [//.. fourth collection] 
]; 

$scope.data = dataCollections[0]; 

$scope.$watch('count', function() { 
    $scope.data = $scope.count < 4 ? dataCollections[$scope.count] : dataCollections[3]; 
}); 

당신이 가고있어 내가 무엇도 확실하지 않다 :

그것은 또한 당신이 $scope.table1 조건 일에서 $scope.tableParams하고 데이터를 외부화하는 경우 다른 사람이 읽고 디버그하기 위해/당신을 위해 쉽게 만들 것 거기에 컨트롤러의 내부에 $compile이 있습니다. 써드 파티 모듈을 사용하기 전에 Angular 컨트롤러를 작성하는 것에 대한 몇 가지 사항을 조사하면 작업이 쉬워 질 수 있습니다.

Answer 3

시행 착오를 통해 나는 plunkrs에 표시된 것보다 겉으로보기에 더 나은 해결책을 발견했습니다. 명확성을 위해 서비스에서 $ resource을 사용하여 데이터를 가져옵니다. 모달을 통해 레코드를 추가 할 때 처음에는 모달을 닫은 후 ng 테이블을 업로드하지 않습니다.

// Get data from factory 
var data = dataFactory.query(); 

//Use promise to load data to table, note the replacing of the second tableParams 
//object parameter with a function 
data.$promise.then(function (data){ 
    $scope.tableParams = new ngTableParams({ 
     page: 1,   // show first page 
     count: 10, 
     sorting: { 
      name: 'asc' 
     }, 
     filter: { 
      name: undefined    
     } 
    }, resetTableParams() 
    ); 
}); 

//The function that replaces the tableParams param 
var resetTableParams = function(){ 
    return { 
     total: data.length, 
     getData: function($defer, params) { 
      var filteredData = params.filter() ? $filter('filter')(data, params.filter()) : data; 
      var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData; 

      params.total(orderedData.length); 
      $defer.resolve($scope.data = orderedData.slice((params.page() -1) * params.count(), params.page() * params.count()));   
      } 
    } 
} 

//A method to update the table that can be called when closing a modal 
var updateTable = function(){ 
    data = dataFactory.query(); 
    data.$promise.then(function (data){ 
     $scope.tableParams.reload(); 
    }); 
} 

// Add table row to table in modal and call updateTable() on closing modal 
$scope.addRow = function(){ 
    var modalInstance = $modal.open({ 
     templateUrl: 'resources/partials/newrecord.html', 
     controller: NewRecordModalCtrl 
    }) 

    modalInstance.result.then(function(){ 
     updateTable(); 
    }); 
} 

불행하게도, 나는이 작품과 다른 방법하지 않는 이유에 대한 명확한 설명을 제공 할 수 없습니다 나는 나를 위해 작동 방법을 알아 냈어. 예를 들어, resetTableparams() 함수를 사용하지 않고 하드 코드 된 상태로두면 테이블이 업데이트되지 않습니다. 어쨌든 Angular의 다이제스트주기는이 점을 더 좋아합니다. 누군가 좋은 설명이 있다면 공유하십시오!

는

Answer 4

I뿐만 아니라 동적 데이터 NG 테이블에
는 I 데이터베이스를 변경할 Ajax 호출을 사용 하였다 (추가/제거), 및 success: function() {} 속성 일하는

는 tableParams
하지만 변경을 변경할 내가 console.log() 몇 년대에, 그것을 갱신하지 않는 한 페이지에 표시되지 것입니다, 나는 success: function() {} 실제로
실행 결코 발견하지만 항상 실행해서 다른 기능 complete: function() {} 나는 그것의 코드를 넣어 논리적으로 잘못 알고이있다 complete: function() {}에 성공적으로 전화를 건 후에 만 ​​작동해야하지만 내 success: 기능이 작동하지 않는 경우 그의 수정은 그다지 좋지 않습니다. 특히 데이터베이스에 변경이 항상 성공적으로 수행되었음을 알면
성공 호출이 웹 사이트의 다른 페이지에서 작동하기 때문에 이상하지만 일부 코드에서는 그렇지 않습니다. 편집 :
글쎄,이 문제는 데이터의 길이가 위에서 언급 한 "텍스트의 편집"을 변경하지 않으면 문제를 해결하지 못합니다.

$.ajax({ 
     type: "POST", 
     url: /*some url*/, 
     data: JSON.stringify({ /*some variable*/ } 
     }), 
     contentType: "application/json; charset=utf-8", 
     dataType: "Json", 
     success: function() { // would never execute even if it's a successful call 
      console.log("success"); 
     }, 
     error: function() { // optional, personally didn't try it 
      console.log("error"); 
     } 
     complete: function() { //always executes regardless of the result 
      console.log("complete"); 
     } 
    }); 

Answer 5

은 직접 당신이 당신의 페이지에 한 번만 ng-controller="yourController"를 설정했는지 확인 문제를 해결하기 위해 제공되는 방법을 $scope.tableParams.reload();

Answer 6

를 사용할 수 있습니다.

<div ng-controller="yourController"> 
    <table ng-table = "tableParams" ng-controller = "yourController"> 
    </table> 
</div> 

는 HTML 페이지에 추가 ng-controller을 제거하여 문제를 해결 :

아래 코드는 데이터를 업데이트하지 않습니다 답장을

<div ng-controller="yourController"> 
    <table ng-table = "tableParams"> 
    </table> 
</div>