Question

正如标题所示，我希望能够每30秒左右从服务器刷新一次ng-repeat列表。可以在后端添加更多数据，因此我希望我的列表能够反映出来。现在我有正常的$http.get( )正常工作，在这里：

$scope.select = function() {
  $scope.searchText = '';
  $scope.selectedItem = null;
  var url = 'http:xxxxxxxxxxxx.com';
  url += $scope.selectModel.name;
  console.debug("GOING TO: " + url);
  $http.get(url).success(function(data2) {
    $scope.records = [];
    data2.forEach(function(r) {
        $scope.records.push(r);
    });
  });
};

它提供的网页部分是：

<div style="margin: 1em">
<h4>Search</h4>
        <div role="form">
            <!-- start dropdown -->
            <div class="form-group">
                <select class="form-control" ng-options="model as model.name for model in allModels" ng-model="selectModel" ng-change="select()">
                    <option value="">Choose Model</option>
                </select>
            </div>
            <!-- /end dropdown-->
            <div class="form-group">
                <input id="start_date" type="text" class="form-control" placeholder="Threat Date">
            </div>
        </div>
    <div>
        <table class="table table-hover table-striped" ng-show="records">
            <thead>
                <th>#</th>
                <th>Name</th>
                <th>Score</th>
            </thead>
            <tr data-ng-repeat=" item in records | orderBy : '-score' | limitTo : 10 " ng-click="moreInfo(item)">
                <td>{{$index+1}}</td>
                <td>{{item.name.slice(5)}}</td>
                <td>{{item.score.toFixed(3)}}</td>
            </tr>
        </table>
    </div>
</div>

有没有办法选择列表刷新的时间？它必须没有点击刷新按钮或类似的东西。提前谢谢。

编辑这是我按照建议尝试使用$interval时遇到的错误：

ReferenceError: $interval is not defined
    at Scope.$scope.select (http:xxxxxxxxxx.com/UserQuery/js/script.js:24:7)
    at fn (eval at <anonymous> (https://code.angularjs.org/1.4.0-rc.0/angular.js:12822:15), <anonymous>:2:209)
    at Scope.$get.Scope.$eval (https://code.angularjs.org/1.4.0-rc.0/angular.js:15465:28)
    at https://code.angularjs.org/1.4.0-rc.0/angular.js:21825:13
    at https://code.angularjs.org/1.4.0-rc.0/angular.js:24485:9
    at forEach (https://code.angularjs.org/1.4.0-rc.0/angular.js:332:20)
    at NgModelController.$$writeModelToScope (https://code.angularjs.org/1.4.0-rc.0/angular.js:24483:5)
    at writeToModelIfNeeded (https://code.angularjs.org/1.4.0-rc.0/angular.js:24476:14)
    at https://code.angularjs.org/1.4.0-rc.0/angular.js:24470:9
    at validationDone (https://code.angularjs.org/1.4.0-rc.0/angular.js:24398:9)

解决方案通过这个和另一个问题的共同努力，我找到了解决方案。首先，就像上面提到的这个问题中的许多人一样，这里的关键是使用$interval。但是，使用它还有一些重要的事情要做。

它必须包含在控制器的依赖项中 @mcpDESIGNS提到。

在我的情况下，有一个下拉列表，我想要多件事到$interval结束时，重要的是在打开新的时关闭一个一。

$scope.select = function() {
      $scope.searchText = '';
      $scope.selectedItem = null;
      $interval.cancel(mainInterval);
      $scope.url = '';
      url = 'http:xxxxxxxxxxxxxx.com';
      url += $scope.selectModel.name;
      console.debug("GOING TO: " + url);
      $http.get(url).success(function(data2) {
        $scope.records = [];
        data2.forEach(function(r) {
          $scope.records.push(r);
        });
      });     
      mainInterval = $interval(function() {
        console.debug("UPDATING....");
        console.debug("GETTING NEW FROM " + url);
        $http.get(url).success(function(data2) {
          $scope.records = [];
          data2.forEach(function(r) {
            $scope.records.push(r);
          });
        });
      }, 5000);
    };

Answer 1

看看这个：

https://docs.angularjs.org/api/ng/service/$interval

它包装了JavaScript的本机setInterval函数。您可以将其设置为每30秒进行一次轮询。

它还会返回一个承诺，因此您可以在需要时取消该间隔。

但请记住：

＆＃34; 完成后，必须明确销毁此服务创建的间隔。特别是当控制器的范围或指令的元素被破坏时，它们不会被自动销毁。您应该考虑到这一点，并确保始终在适当的时候取消间隔。有关如何以及何时执行此操作的更多详细信息，请参阅下面的示例。＆＃34;

修改

拿你的代码：

$scope.select = function() { $scope.searchText = ''; $scope.selectedItem = null; var url = 'http:xxxxxxxxxxxx.com'; url += $scope.selectModel.name; console.debug("GOING TO: " + url); $http.get(url).success(function(data2) { $scope.records = []; data2.forEach(function(r) { $scope.records.push(r); }); }); $interval(function() { $http.get(url).success(function(data2) { $scope.records = []; data2.forEach(function(r) { $scope.records.push(r); }); }); }, 30000); };

尝试更改为：

{{1}}

如果有效，你可以将实际的$ http.get重构为命名函数，以消除代码气味。

Answer 2

只需在$interval()周围使用$http即可每30秒刷新一次。

$interval(function () {
    $http({ 
        /* run your AJAX and update your $scope / etc */ 
    });
}, 30000); // in milliseconds

注意：$interval必须依赖注入您的控制器/服务/等工作！

 // for examples sake
.controller('MyController', ['$interval', function ($interval) { }]);

Answer 3

使用 ng-table 代替。看看http://bazalt-cms.com/ng-table/

你可以调用重新加载属性，这将刷新你的表格，

您可以在angular提供的$ timeout服务内调用重新加载。

$timeout(function(){
tablename.reload();
},3000);

或

只需在超时内调用select函数

$timeout(function(){ $scope.select(); },3000);

Answer 4

试试这个：好的，我认为计划是每次选择被激活时，现有的间隔需要被取消而另一个间隔开始。看看这个：

   var intervalObj;
   $scope.select = function() {
      if (intervalObj !== null) {
          $interval.cancel(intervalObj);
          intervalObj = null;
      }
      $scope.searchText = '';
      $scope.selectedItem = null;
      var url = 'http:xxxxxxxxxxxx.com';
      url += $scope.selectModel.name;
      console.debug("GOING TO: " + url);
      $http.get(url).success(function(data2) {
        $scope.records = [];
        data2.forEach(function(r) {
            $scope.records.push(r);
        });
      });
      intervalObj = $interval(function() {
        $http.get(url).success(function(data2) {
        $scope.records = [];
        data2.forEach(function(r) {
            $scope.records.push(r);
        });
      });
    }, 30000);
};

我无法对此进行全面测试，但原则是合理的。

每x秒从服务器刷新一次ng-repeat列表

4 个答案: