使用Angularjs定期刷新html表格数据答案

【问题标题】：Refresh html table data at regular interval using Angularjs使用Angularjs定期刷新html表格数据
【发布时间】：2016-01-24 15:16:36
【问题描述】：

我试图通过使用 $interval 服务调用 GetTicketDetails 方法每十秒刷新一次 html 表数据，但我的视图没有反映更改。下面是我用于绑定数据的 Java 脚本代码部分：

$scope.GetTicketDetails = function () {
    $http.get(CMSRestServiceURL+"getalltickets")
               .success(function (response) {                      
                   $scope.ticketdetails = response;                                              
               });                  
};

下面是$interval代码：

$interval(function () {
    $scope.GetTicketDetails();        
}, 10000);

下面是我的html：

<table id="tblticketdetails" class="table table-condensed table-bordered ticketdetailstablestyle">
                        <thead>
                            <tr>
                                <th class="tableheadingstyle">Ticket ID</th>
                                <th class="tableheadingstyle">Created DateTime</th>
                                <th class="tableheadingstyle">Customer ID</th>
                                <th class="tableheadingstyle">Subject</th>
                                <th class="tableheadingstyle">Description</th>
                                <th class="tableheadingstyle">Status</th>
                                <th class="tableheadingstyle">Edit Ticket</th>
                            </tr>
                        </thead>
                        <tbody class="searchable">
                            <tr ng-repeat="ticket in ticketdetails">
                                <td>{{ ticket.TicketID }}</td>
                                <td>{{ ticket.CreatedDateTime }}</td>
                                <td>{{ ticket.CustomerID }}</td>
                                <td>{{ ticket.Subject }}</td>
                                <td>{{ ticket.Description }}</td>
                                <td ng-switch on="ticket.Status">
                                    <span class="labelstatus label-danger" ng-switch-when="open">Open</span>
                                    <span class="labelstatus label-info" ng-switch-when="pending">Pending</span>
                                    <span class="labelstatus label-primary" ng-switch-when="work in progres">Work in Progress</span>
                                    <span class="labelstatus label-success" ng-switch-when="resolved">Resolved</span>
                                    <span class="labelstatus label-warning" ng-switch-when="not resolved">Not Resolved</span>
                                    <span class="labelstatus label-warning" ng-switch-when="violated">Violated</span>
                                </td>
                                <td>
                                    <button class="btnEdit btn-warning" ng-click="Edit(ticket)">Edit</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

我已经尝试过 $scope.$apply() 和 $scope.$digest()。但在那之后，这些变化也没有反映在我的观点中。任何帮助表示赞赏。提前致谢。

【问题讨论】：

你不需要 $apply。代码很好。
我也试过不使用 $apply。变化没有反映。我注意到的一件事是打开开发者工具后视图发生了变化。
您的 $interval 服务代码在哪里？
Tarun- 更新了问题。请立即检查。
在 $scope.ticketdetails = response; 之后的 GetTicketDetails 函数中添加一个 console.log； .看看是不是每次都更新。

标签： javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

经过很长时间，我发现了问题所在。我检查了 chrome 中的应用程序，数据立即更新。然后我明白这是一个只与IE浏览器有关的问题。 IE 将 $http.get 请求存储在缓存中，并在下次相同请求时从缓存中渲染数据，而不是填充更新的数据。

将以下部分添加到您的 Angular 应用程序将解决问题：

app.config(['$httpProvider', function ($httpProvider) {
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
}        
//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

感谢cnmuc：Angular IE Caching issue for $http

【讨论】：