使用Angularjs定期刷新html表数据

时间:2015-10-25 13:30:18

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

我正在尝试使用$ interval服务调用GetTicketDetails方法每十秒刷新一次html表数据,但我的视图并未反映更改。下面是我的Java Script Code部分,用于绑定数据:

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

下面是$ interval code:

$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()。但在此之后,我认为这些变化并未反映出来。任何帮助表示赞赏。提前谢谢。

1 个答案:

答案 0 :(得分:1)

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

将以下部分添加到角度应用中将解决问题:

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