Question

我有一个在页面加载时调用的api。来自api的数据通过角度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>

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

Answer 1

您需要留在当前范围内。

在$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(); });递归调用下一个间隔。

{{1}}

Answer 2

对于没有得到解决的表刷新，这就是我能够使它工作的方式。我下载并应用了animate.css。然后我给表了一个起始类，在类加载时为它设置动画。然后我有一个函数在页面加载时获取数据数组，然后是另一个每0.5秒获取一次并进行比较的函数。如果有任何更改，则重新应用该类并显示动画。

Angular Ng-Repeat Table

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

});

角度表刷新

2 个答案: