Fatal编程技术网

Javascript 角度表刷新

javascript angularjs

Javascript 角度表刷新,javascript,angularjs,Javascript,Angularjs,我有一个在页面加载时被调用的api。api中的数据通过angular ng repeat加载到表中。我还有一个javascript函数，它每10秒调用一次，为相同的数据集调用相同的api。我想知道，如果数据集发生变化，如何将新数据集应用于表并替换旧数据集，以及如何用动画直观地显示此变化。代码如下 表代码 <body ng-app="myApp" ng-controller="ScansController"> <div class="bs-example" id="scan-t

我有一个在页面加载时被调用的api。api中的数据通过angular ng repeat加载到表中。我还有一个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>
您需要保持在当前范围内

在
$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();
});
至于没有得到解决的表刷新，这就是我如何使其工作的。我下载并应用了animate.css。然后，我给了这个表一个起始类，以便在类加载时为它设置动画。然后我有一个函数在页面加载时获取数据数组，然后还有一个函数每0.5秒获取一次数据并进行比较。如果有任何更改，则重新应用该类并显示动画

角度Ng重复表

<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);
    }); 
});

<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>
当模型发生变化时，它会自动影响视图右侧？Angular会处理吗？查看此链接此代码在初始加载时有效，但在10秒后不会再次调用。我没有看到您注入了$timeout@Monzingo如果答案对您的问题有帮助，请接受/投票。我投票赞成代码调整，我想我仍然需要一种方法来检查是否存在差异，如果存在差异，请设置差异动画。 
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();

});