点滅する角Jsなしでデータベースからデータをロード

Question

データベースからangualar jsを使用してhtmlの表にデータをロードしています。 10秒ごとにテーブルをリロードして他のユーザーが入力したばかりの新しいデータを取得するように間隔を使用しています。

問題： リロードするたびにテーブルが点滅します。それは不具合があるようにページを面白く見せる。

何を探しています： すると、私は新しいデータがちょうどそう、テーブルの上からスライドさせ、残りの再その下に調整し、数2になっている間ナンバーワンとなり、3とすることができます方法はありますに。私の代わりに私のいつもAJAXを使用しての角のJsは、私はそれを選んだ理由は、魔法の理由であると信じて作られた

角度コード

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の問題を考える。..

あなたはまだデータがアップからダウンにスライドを表示させたい場合は、あなたがコメントを解除することができます答えのコードは、このようにしてテーブルから行を1つずつ削除し、新しい行と置き換えます。 SO閲覧時私の一日を作るための

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）あなたのデータをロードするアルゴリズムを書く鶏はそれを既存のデータと比較します。差異がある場合は、新しいレコードをテーブルに追加する必要があります。

2）WebSocketを使用すると、サーバーから新しいレコードだけをリアルタイムで取得できます。