Wie lade ich die dynamische Tabelle alle 1 Sekunde in der Steuerung in angular js?

Question

Ich Abrufen von Daten von api und bevölkern in der Tabelle Ich brauche nur die Tabelle relaod in jedem 1 Sekunde habe ich versucht, $ timeout verwenden, aber im immer Fehler sagen -

$scope.tableParams.reload();//TypeError: Cannot read property 'reload' of undefined 

Code

<div align="center"> 
     <div ng-app="myApp" ng-controller="customersCtrl"> 
      <table ng-table="tableParams"> 
       <tr> 
        <td>device id</td> 
        <td>device unique id</td> 
        <td>access status</td> 
        <td>current time</td> 
       </tr> 
       <tr> 
        <td>{{ access.id }}</td> 
        <td>{{ access.devid }}</td> 
        <td><img ng-src="{{statusValues[access.status]}}" /></td> 
        <td>{{ access.CurrentTime }}</td> 
       </tr> 
      </table> 
     </div> 
     </div> 



     <script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.controller('customersCtrl', function ($scope, $http, $timeout) { 
    $http.get("http://example.com/get") 
    $scope.reloadTable = function() { 
     $timeout(function() { 
      $scope.tableParams.settings().$scope = $scope; 
      $scope.tableParams.reload(); 
      $scope.reloadTable(); 
     }, 1000) 
    }; 
    $scope.reloadTable(); 
}); 
     </script> 

Answer 1

Hallo Ihr Versuch, die params mit Reload-Methode neu zu laden, aber es scheint, dass reload() -Methode mit $ route Konzept arbeitet die URL zu aktualisieren, basierend auf params. und insted $ timeout, versuchen Sie mit $ Intervall,

ich hier einige Änderungen gemacht haben, nehmen Plesae einen Blick und dies kann hilfreich

var app = angular.module('myApp', []); 
 
app.controller('customersCtrl', function ($scope, $http, $interval) { 
 
    $scope.fn = function(){ 
 
    $http.get("https://jsonplaceholder.typicode.com/posts") 
 
     .then(function(data){ 
 
     console.log(data.data) 
 
     $scope.Tdata = data.data;  
 
    }) 
 
    } 
 
     $interval(function() {   
 
      $scope.fn() 
 
     }, 1000)  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app='myApp' ng-controller="customersCtrl"> 
 
<div align="center"> 
 
     <div ng-app="myApp" ng-controller="customersCtrl"> 
 
      <table ng-table="tableParams"> 
 
       <tr> 
 
        <td>device id</td> 
 
        <td>device unique id</td> 
 
        <td>access status</td> 
 
        <td>current time</td> 
 
       </tr> 
 
       <tr ng-repeat="d in Tdata"> 
 
        <td>{{ d.id }}</td> 
 
        <td>{{ d.title }}</td> 
 
        <td><img ng-src="{{}}" /></td> 
 
        <td>{{ d.body }}</td> 
 
       </tr> 
 
      </table> 
 
     </div> 
 
     </div> 
 
</div>

Answer 2

fügen Sie einfach die folgende Codezeile in meinen Code nach tableParams Instanz erstellen.

$scope.tableParams.settings().$scope = $scope; 

Answer 3

<script type="text/javascript"> 
     var app = angular.module('myApp', []); 
     app.controller('customersCtrl', function ($scope, $http, $timeout, $interval) { 
      getData = function(){ 
       $http.get("http://example.com/get") 
        .success(function(data) { 
         $scope.tableParams.settings().$scope = $scope; 
         $scope.reloadTable(); 
        }) 
        .error(function(data, status) { 
         console.error(status); 
        }) 
      } 

      $interval(function(){ 
       getData(); 
      }, 1000); 
</script>