angularjs中的数据表不能正常工作

Question

我正在使用angular datatable来显示http请求中的响应 我会将请求发送到Web API，它将与SQL Server数据库通信并给出响应 它对响应正常工作这是有数据，但为空响应显示在用户界面中的数据表显示从以前的回应

任何人都可以请帮助我贴心，如“有没有记录插入的给定请求”响应时一片空白 ？

Angular JS: 
    $scope.currentPage = 0; //current page 
    $scope.entryLimit = 10; 

    $scope.prevPage = function() { 
     if ($scope.currentPage > 0) { 
      $scope.currentPage--; 
     } 
    }; 

    $scope.nextPage = function() { 
     if ($scope.currentPage < ($scope.filteredItems/$scope.entryLimit) - 1) { 
      $scope.currentPage++; 
     } 
    }; 

    $scope.setPage = function() { 
     $scope.currentPage = this.n; 
    }; 

    $scope.filter = function() { 
     $timeout(function() { 
      $scope.filteredItems = $scope.filtered.length; 
     }, 10); 
    }; 
    $scope.sort_by = function(predicate) { 
     $scope.predicate = predicate; 
     $scope.reverse = !$scope.reverse; 
    }; 


    $scope.range = function (size,start, cu,elimit) { 
     var ret = []; 




     if(($scope.filteredItems/$scope.entryLimit) < elimit) 
     { 
      if(($scope.filteredItems/$scope.entryLimit) ==0) 
      { 
      elimit = 1; 
      } 
      else 
      { 
       elimit = Math.ceil($scope.filteredItems/$scope.entryLimit); 

      } 
     } 
     var end = parseInt(cu)+parseInt(elimit); 

     console.log(size,start, end); 

     if (size < end) { 
      end = size; 
      start = 0; 
     } 
     for (var i = start; i < end; i++) { 
      ret.push(i); 
     } 
     console.log(ret); 

     return ret; 

    }; 


HTML: 
<div ng-show="filteredItems > 0"> 
    <div class="col-md-2">PageSize: 
     <select ng-model="entryLimit" class="form-control"> 
      <option>10</option> 
      <option>20</option> 
      <option>50</option> 
      <option>100</option> 
     </select> 
    </div> 
    <div class="col-md-3">Filter: 
     <input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" /> 
    </div> 
    <div class="col-md-4"> 
     <h5>Filtered {{ filtered.length }} of {{ totalItems}} total </h5> 
    </div> 
    </div> 
     <div> 
    <div class="col-md-12" ng-show="filteredItems > 0" > 

     <br/> 
     <br/> 

    <table class="table table-bordered table-striped table-hover " style=" outline: 1px solid orange;" > 

     <thead> 
     <tr> 

       <th ng-repeat="(key,value) in items[0]" ng-click="sort_by(key);" >{{key}}</th> 
     </tr> 


     </thead> 
     <tbody> 
     <tr ng-repeat="items in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit "> 
      <td ng-repeat="(key,value) in items" > {{value}} </td> 

     </tr> 


     </tbody> 

    </table> 
       </div> 
    <div class="col-md-12" ng-show="filteredItems == 0"> 
      <div class="col-md-12"> 
       <h4>No details found</h4> 
      </div> 
     </div> 
    <div class="col-md-12" ng-show="filteredItems > 0 "> 

     <div colspan="6"> 
      <div class="pagination pull-right"> 
       <ul> 
        <li ng-class="{disabled: currentPage == 0}"> 
         <a href ng-click="prevPage()">« Prev</a> 
        </li> 

        <li ng-repeat="n in range(filteredItems, currentPage, currentPage , 5) " 
         ng-class="{active: n == currentPage}" 
         ng-click="setPage()"> 
         <a href ng-bind="n + 1">1</a> 
        </li> 

        <li ng-class="{disabled: (currentPage) == filteredItems - 1}"> 
         <a href ng-click="nextPage()">Next »</a> 
        </li> 
       </ul> 
      </div> 
     </div> 


    </div> 

    </div> 

我的Http会重新发送$ scope.items。

感谢

Answer 1

尝试验证填充表之前的反应... 喜欢的东西

if(response!== null){ 
    $scope.items={}; 
    return; 
    } 
    else{ 
    $scope.items=response; 
    } 

Answer 2

看起来也许你保持在$范围的API调用的响应时间超过需要。

在API调用之前销毁并刷新$ scope中的模型对象，以便$ scope只包含来自新响应的对象。

例如。

stories.destory() 

在你的控制器，说你的模型

$scope.items.destroy(); 
// API call to receive results form server, 
// now check if you received items response from server, if not display the message to the user. 

感谢， 保罗