具有JSON数据和粘性可折叠行的动态表

时间:2016-07-07 11:39:03

标签: javascript angularjs json

我正在使用Angular 1和一个工厂,该工厂轮询REST API以获取JSON数据。然后,这个JSON使用ng-repeat-start填充表,并使用ng-repeat-end我有一个带有附加数据的隐藏表行。

对我来说似乎很平常。

但问题是,当我每隔5或10秒轮询一次API时,如何在下次轮询发生时保持可折叠表行打开?

在大多数情况下,数据不会更改,因此没有理由关闭可折叠行,但在我的工厂进行的每次民意调查中它都会关闭。

以下是其中一个表的示例。

  <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>

这是我的工厂轮询数据,以及一个角度控制器的示例。

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

0 个答案:

没有答案