從數據庫加載數據不閃爍角Js

Question

我正在從數據庫中加載數據到一個表與Angualar js的HTML。我也使用間隔，以便每10秒鐘重新加載表以獲取剛剛由其他用戶輸入的新數據。

問題： 該表在每次重新加載時閃爍。使頁面看起來很有趣，就像它有一個小故障。

什麼在尋找： 有沒有一種辦法可以讓新的數據只是從表的頂部滑動，併成爲頭號其餘的重新調整它的下面併成爲數二，三等等上。我被弄得相信角的js就是爲什麼我選擇了它，而不是用我平時的AJAX

角碼

var supDetails = angular.module("supDetails", ['datatables']); 

    supDetails.controller('supportController', function($scope, $http, $interval) { 
      $scope.names = []; 
$scope.isFirst = true; 
$scope.loadData = function() {  
    var httpRequest = $http({ 
     method: 'GET', 
     url: 'anfil.php?ins=sup' 

    }).success(function(data, status) { 
    console.log('loading..'); 
     $scope.names = data; 

     if(!$scope.isFirst){ 
      angular.forEach(data,function(key,val){ 
      $scope.names[key] = data[key]; 
      }); 
     }    
     $scope.isFirst = false; 
    }); 

}; 

     $scope.loadData(); 

// Function to replicate setInterval using $timeout service. 

    $interval(function() { 
     $scope.loadData(); 
}, 10000); 

    }); 

我的HTML神奇的原因

<!-- /.col --> 
    <div class="col-md-9" ng-app = "supDetails" ng-controller="supportController"> 
     <div class="box box-primary"> 
     <div class="box-header with-border"> 
      <h3 class="box-title">Messages</h3> 
      <!-- /.box-tools --> 
      <div class="box-tools pull-right"> 
      <div class="has-feedback"> 
      <button type="button" ng-click="loadData()" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button> 
      </div> 
      </div> 
     </div> 
     <!-- /.box-header --> 
     <div class="box-body no-padding"> 

      <div class="mailbox-messages"> 
      <table datatable="ng" class="table table-hover table-striped"> 
      <thead> 
      <tr> 
       <th>Stat</th> 
       <th>Name</th> 
       <th>Problem</th> 
       <th>Time</th> 
      </tr> 
      </thead> 
       <tbody> 
       <tr ng-repeat="x in names"> 
       <td class="mailbox-star"><a href="#"><i class="fa fa-circle text-blue"></i></a></td> 
       <td class="mailbox-name"><a href="read-mail.html">{{x.user_id}}</a></td> 
       <td class="mailbox-subject"><b>{{x.ticket_title}}</b> - {{x.subject}} 
       </td> 
       <td class="mailbox-date">{{x.ticket_open_date}}</td> 
       </tr> 

       </tbody> 
       <tfoot> 
       <tr> 
       <th>Stat</th> 
       <th>Name</th> 
       <th>Problem</th> 
       <th>Time</th> 
      </tr> 
       </tfoot> 
      </table> 
      <!-- /.table --> 
      </div> 
      <!-- /.mail-box-messages --> 
     </div> 
     <!-- /.box-body --> 
     </div> 
     <!-- /. box --> 
    </div> 
    <!-- /.col --> 

Answer 1

我認爲它你的CSS問題不具有的最小高度，你可以在這個片段中其不閃爍看..

如果仍要數據出現由升轉跌滑，你可以取消答案中的代碼以這種方式將從表格中逐一刪除行並將其替換爲新的行。

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

 
function PeopleCtrl($scope, $http,$interval) { 
 

 
    $scope.people = []; 
 
    $scope.isFirst = true; 
 
    $scope.loadPeople = function() {  
 
     var httpRequest = $http({ 
 
      method: 'GET', 
 
      url: 'https://jsonplaceholder.typicode.com/users' 
 

 
     }).success(function(data, status) { 
 
     console.log('loading..'); 
 
      $scope.people = data; 
 
      
 
      /* if(!$scope.isFirst){ 
 
       angular.forEach(data,function(val,key){ 
 
       $scope.people[key] = data[key]; 
 
       }); 
 
      }    
 
      $scope.isFirst = false;*/ 
 
     }); 
 

 
    }; 
 
    
 
    $scope.loadPeople(); 
 
     $interval(function() { 
 
       $scope.loadPeople(); 
 
    }, 10000); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div ng-app="myApp"> 
 
<div ng-controller="PeopleCtrl"> 
 
    
 
<table class="table"> 
 
    <tr> 
 
     <th>Id</th> 
 
     <th>Name</th> 
 
     <th>UserNmae</th> 
 
    </tr> 
 
    <tr ng-repeat="person in people"> 
 
     <td>{{person.id}}</td> 
 
     <td>{{person.name}}</td> 
 
     <td>{{person.username}}</td> 
 
    </tr> 
 
</table> 
 
</div> 
 
</div>

Answer 2

有一個很少有辦法解決你的問題：

1）寫算法，加載你的數據t母雞將其與現有數據進行比較。如果有任何差異，你應該只添加新的記錄到你的表中。

2）使用WebSockets，它們將使您能夠實時從服務器獲取新記錄。