角度表刷新

我有一個頁面加載時調用的api。來自api的數據通過角度重複加載到表格中。我也有一個JavaScript函數每10秒調用一次，調用同一個數據集的api。我想知道如何將新數據集應用到表中，並在數據集更改時替換舊數據，以及如何使用動畫直觀顯示此更改。代碼如下。角度表刷新

表代碼

<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

當在該模型中的更改會自動對視圖中右鍵影響？ Angular會照顧那個嗎？ 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

對不起，我沒有看到你注入$超時 – Monzingo

@Monzingo接受/如果這對你的問題有幫助，請提出答案。 –

至於沒有得到解決的表刷新，這是我能夠使其工作。我下載並應用了animate.css。然後，我給了這個表格一個啓動課，讓它在課堂上加載動畫。然後我有一個函數可以在頁面加載時獲取數據數組，然後每隔0.5秒獲取一次數據並進行比較。如果有任何改變，那麼該課程將重新應用並顯示動畫。

角伍重複表

<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

回答

相關問題