每x秒從服務器刷新一個ng-repeat列表

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秒進行一次輪詢。

它還返回一個承諾，以便您可以在需要時取消間隔。

但是，請記住這一點：

「該服務創建間隔必須當你與他們完成明確銷燬特別是當一個控制器的範圍或指令的元素是他們沒有自動銷燬。你應該考慮到這一點，並確保在適當的時候總是取消間隔時間。有關如何以及何時執行此操作的更多詳細信息，請參閱下面的示例。「

編輯

以你的代碼：

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

嘗試改變這樣的：

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

如果這樣的作品，那麼你可以重構實際$ 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/

和U可以調用它重裝屬性格式，這將刷新你的表，

您可以通過角度提供$超時服務中調用的重載。

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

我還沒有能夠完全測試這個，但原理是健全的。