角テーブルのリフレッシュ

ページ読み込み時に呼び出されるAPIがあります。 apiからのデータは、角度ng-repeatを介してテーブルにロードされます。私も同じデータセットの同じAPIを呼び出す10秒ごとに呼び出されるjavascript関数があります。新しいデータセットをテーブルに適用し、データセットが変更された場合は古いものを置き換え、アニメーションでこの変更を視覚的に表示する方法を知りたいと思います。コードは以下の通りです。角テーブルのリフレッシュ

表コード

<body ng-app="myApp" ng-controller="ScansController"> 
<div class="bs-example" id="scan-table"> 
    <table id="scansTable" class="table table-striped"> 
     <thead> 
      <tr> 
       <th>ScanId</th> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Time Stamp</th> 
      </tr> 
      <tr ng-repeat="scan in Scans"> 
       <td> 
        {{scan.scanId}} 
       </td> 
       <td> 
        {{scan.firstName}} 
       </td> 
       <td> 
        {{scan.lastName}} 
       </td> 
       <td> 
        {{scan.timeStamp}} 
       </td> 
      </tr> 
     </thead> 
    </table> 
</div>

Javascipt間隔コード

<script> 
    window.setInterval(function() { 
    $.ajax({ 
     url: 'api/scans/', 
     type: 'Get', 
     dataType: 'json', 
     success: function (data) {     
     //Something here 
     }, 
     error: function() { 
      alert("something failed"); 
     } 
    }); 

    }, 10000); 
</script>

角度コード

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

myApp.service('dataService', function ($http) { 

this.getData = function() { 

    return $http({ 
     method: 'GET', 
     url: '/api/scans/' 
    }); 
} 
}); 

myApp.controller('ScansController', function ($scope, dataService) { 
$scope.Scans = []; 

    dataService.getData().then(function (result) { 
     $scope.Scans = result.data; 
     console.log(result.data); 
    }); 
});

出典

2016-09-06 Monzingo

モデルの変更があった場合には、自動的にビューの右に影響を与えるのだろうか？角度はそれを処理しますか？ https://jsfiddle.net/eu81273/pPU4m/ このリンクを参照 –

現在のスコープの内部に留まる必要があります。

$httpコールで間隔を設定することは毒です。成功コールバック内に$timeoutを使用して、再帰的に次の間隔を呼び出します。

myApp.controller('ScansController', function ($scope, $timeout, dataService) { 

    $scope.Scans = []; 

    function fetchData(){ 
    dataService.getData().then(function (result) { 
     $scope.Scans = result.data; 
     $timeout(function(){ fetchData(); },10000); 
    }); 
    } 

    fetchData(); 
});

出典

2016-09-06 16:39:03

このコードは初期の負荷で動作しますが、10秒後にもう一度電話をかけることはありません – Monzingo

$ timeoutを注入したことを申し訳ありません。 – Monzingo

@Monzingo受諾/それがあなたの問題を助けたならば答えをアップアップしてください。 –

テーブルリフレッシュが解決されない限り、これは私がそれを動作させる方法でした。 animate.cssをダウンロードして適用しました。私はクラスの読み込み時にそれをアニメーション化するための開始クラスをテーブルに与えました。次に、ページのロード時にデータの配列をフェッチし、0.5秒ごとにフェッチして比較する関数を持っています。何かが変更された場合、クラスが再適用され、アニメーションが表示されます。

角度NG-繰り返し表

<link href="~/Content/animate.min.css" rel="stylesheet" /> 
<h1> 
Scans 
</h1> 
<body ng-app="myApp" ng-controller="ScansController" > 
    <table id="scansTable" class="table table-striped"> 
     <thead> 
      <tr> 
       <th>ScanId</th> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Time Stamp</th> 
      </tr> 
      <tr ng-repeat="scan in Scans" ng-class-odd="'odd'" ng-class-even="'even'" class="animated bounceIn"> 
       <td> 
        {{scan.scanId}} 
       </td> 
       <td> 
        {{scan.firstName}} 
       </td> 
       <td> 
        {{scan.lastName}} 
       </td> 
       <td> 
        {{scan.timeStamp}} 
       </td> 
      </tr> 
     </thead> 
    </table>

角度コントローラ

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

myApp.service('dataService', function ($http) { 

this.getData = function() { 

    return $http({ 
     method: 'GET', 
     url: '/api/scans/' 
    }); 
} 
}); 

myApp.controller('ScansController', function ($scope, dataService, $timeout) { 

$scope.Scans = []; 
$scope.NewScans = []; 

function fetchData() { 
    dataService.getData().then(function (result) { 

     $scope.Scans = result.data; 
     $("#scansTable").removeClass('animated bounceIn');   
    }); 
} 

function fetchNewData() { 
    dataService.getData().then(function (result) { 

     $scope.NewScans = result.data; 

     if ($scope.Scans.length != $scope.NewScans.length) 
     {    
      $("#scansTable").addClass('animated bounceIn'); 
      $scope.Scans = $scope.NewScans    
     } 

     $timeout(function() { fetchNewData(); }, 500); 
    }); 
} 

fetchData(); 
fetchNewData(); 

});

出典

2016-09-08 18:34:02 Monzingo

角テーブルのリフレッシュ

答えて

関連する問題