使用ng-table從服務器加載和重新加載數據的正確方法是什麼？

Question

我從服務器加載我的數據在ng表中，並且必須在更改位置後重新加載數據。 這是我下面的代碼：

settlementsystem.controller('ContractsController', ['$scope', '$filter', 'ngTableParams', '$http', function ($scope, $filter, ngTableParams, $http) { 
 

 
     var contractsData = []; 
 

 
     $scope.groupby = 'stateId'; 
 

 
     $scope.tableParams = new ngTableParams({ 
 
      page: 1,       // show first page 
 
      //count: contractsData.length,  // hides pager 
 
      count: 8,   
 
      sorting: { 
 
       stateId: 'asc'    // initial sorting 
 
      } 
 
     }, { 
 
      groupBy: $scope.groupby, 
 
      total: contractsData.length, 
 
      counts: [],      // hides page sizes 
 
      getData: function ($defer, params) { 
 
       // use build-in angular filter 
 
       var filteredData = params.filter() ? 
 
           $filter('filter')($scope.contractsData, params.filter()) : 
 
           $scope.contractsData; 
 

 
       var orderedData = params.sorting ? 
 
           $filter('orderBy')(filteredData, params.orderBy()) : 
 
           orderedData; 
 

 
       if (orderedData != null) { 
 
        //params.total(orderedData.length); // set total for recalc pagination 
 
        $scope.tableParams.total(orderedData.length); 
 
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
 
       } 
 
      } 
 
     }); 
 

 
     $scope.$on('reloadContractsData', function (event, args) { 
 
      var request = createRequestObject($scope, $http); 
 
      $http.post('http://dataServer01/DesktopModules/FE21_Services/API/PackingUnitService/LoadPackingUnitObjectListData', request). 
 
        success(function (data, status, headers, config) { 
 
         if (data.length > 0) { 
 
          $scope.status = status; 
 
          $scope.contractsData = data; 
 
          $scope.tableParams.reload(); 
 
         } 
 
        }). 
 
        error(function (data, status, headers, config) { 
 
         $scope.contractsData = data || "Request failed"; 
 
         $scope.status = status; 
 
         alert(data); 
 
        } 
 
      ); 
 
     }); 
 

 
     // set selected row 
 
     $scope.changeSelection = function (user) { 
 
      $scope.contractsData.forEach(function (u) { 
 
       u.$selected = false; 
 
      }); 
 
      user.$selected = true; 
 
     } 
 

 
     $scope.$watch('groupby', function (value) { 
 
      $scope.tableParams.settings().groupBy = value; 
 
      console.log('Scope Value', $scope.groupby); 
 
      console.log('Watch value', this.last); 
 
      console.log('new table', $scope.tableParams); 
 
      $scope.tableParams.reload(); 
 
     }); 
 

 
     $scope.myData = contractsData; 
 
     $scope.gridOptions = { 
 
      contractsData: 'myData', 
 
      enablePaging: false 
 
     }; 
 

 
    }]);

我對這個問題：

我想隱藏DataPager的。但每次「contractsData.length」或「$ scope.contractsData.length」是未知的。我知道有什麼不對。

請幫幫我。

Answer 1

remove var and add $scope during initialization. 



    settlementsystem.controller('ContractsController', ['$scope', '$filter', 'ngTableParams', '$http', function ($scope, $filter, ngTableParams, $http) { 

      $scope.contractsData = []; 

      $scope.groupby = 'stateId'; 

      $scope.tableParams = new ngTableParams({ 
       page: 1,       // show first page 
       //count: contractsData.length,  // hides pager 
       count: 8,   
       sorting: { 
        stateId: 'asc'    // initial sorting 
       } 
      }, { 
       groupBy: $scope.groupby, 
       total: $scope.contractsData.length, 
       counts: [],      // hides page sizes 
       getData: function ($defer, params) { 
        // use build-in angular filter 
        var filteredData = params.filter() ? 
            $filter('filter')($scope.contractsData, params.filter()) : 
            $scope.contractsData; 

        var orderedData = params.sorting ? 
            $filter('orderBy')(filteredData, params.orderBy()) : 
            orderedData; 

        if (orderedData != null) { 
         //params.total(orderedData.length); // set total for recalc pagination 
         $scope.tableParams.total(orderedData.length); 
         $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
        } 
       } 
      }); 

      $scope.$on('reloadContractsData', function (event, args) { 
       var request = createRequestObject($scope, $http); 
       $http.post('http://dataServer01/DesktopModules/FE21_Services/API/PackingUnitService/LoadPackingUnitObjectListData', request). 
         success(function (data, status, headers, config) { 
          if (data.length > 0) { 
           $scope.status = status; 
           $scope.contractsData = data; 
           $scope.tableParams.reload(); 
          } 
         }). 
         error(function (data, status, headers, config) { 
          $scope.contractsData = data || "Request failed"; 
          $scope.status = status; 
          alert(data); 
         } 
       ); 
      }); 

      // set selected row 
      $scope.changeSelection = function (user) { 
       $scope.contractsData.forEach(function (u) { 
        u.$selected = false; 
       }); 
       user.$selected = true; 
      } 

      $scope.$watch('groupby', function (value) { 
       $scope.tableParams.settings().groupBy = value; 
       console.log('Scope Value', $scope.groupby); 
       console.log('Watch value', this.last); 
       console.log('new table', $scope.tableParams); 
       $scope.tableParams.reload(); 
      }); 

      $scope.myData = contractsData; 
      $scope.gridOptions = { 
       contractsData: 'myData', 
       enablePaging: false 
      }; 

     }]); 

<!-- end snippet -->