角度表刷新

我有一个页面加载时调用的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

回答

相关问题