问题描述:

I'm using Angular 1 with a factory that polls a REST API for JSON data. This JSON then populates a table with ng-repeat-start, and using ng-repeat-end I have a hidden table row with additional data.

Seems rather ordinary to me.

But the problem is, when I poll the API every 5 or 10 seconds, how can I keep the collapsible table row open when the next poll occurs?

In most cases the data does not change, so there's no reason to close the collapsible row, yet it closes at every poll that my factory makes.

Here's an example of one of the tables.

 <table class="pure-table pure-table-horizontal alerts-table" id="alert-nagios-host-table">

<thead>

<tr>

<th>Hostname</th>

<th>Status</th>

<th>Output</th>

</tr>

</thead>

<tbody>

<tr class="parent-row" ng-repeat-start="alert in alerts" ng-click="child.expanded = !child.expanded">

<td>{{alert.hostname}}</td>

<td ng-class="{3:'grayBg', 2:'redBg', 1:'yellowBg', 0:'greenBg'}[alert.state]">{{alert.status}}</td>

<td>{{alert.output}}</td>

</tr>

<tr class="child-row" ng-init="child.expanded = false" ng-show="child.expanded" ng-repeat-end>

<td colspan=4>Duration: {{alert.duration}}</td>

</tr>

</tbody>

</table>

Here is my factory that polls the data, and an example of one of the angular controllers.

mondashApp.factory('AlertsPoller', function ($http, $timeout) {

var data = {resp: {}, count: 0};

var count=0;

var poller = function (url, success) {

count++;

$http.get(url).then(function (responseData) {

data.count = count;

data.resp = responseData.data;

success(data);

$timeout(function () {poller(url, success);}, 5000);

});

};

return {

poller: poller

};

});

mondashApp.controller('nagiosHostAlertsCtrl', function nagiosHostAlertsCtrl($scope, AlertsPoller) {

AlertsPoller.poller('/alert/nagios/host', function(response) {

$scope.alerts = response.resp.alerts;

});

});

相关阅读:
Top