Load AngularJS Data to table on automatic refresh

Question

I have a table which shows values from db through AngularJS:

<div class="container wrapper" ng-controller="DbController">
<table class="table table-hover">
    <tr>
        <th>NUMĂR ORDINE</th>
        <th>NUME CLIENT</th>
        <th>ACȚIUNE</th>
    </tr>
    <tr ng-repeat="detail in details| filter:search_query">
        <td>{{detail.id}}</td>
        <td>{{detail.nume_client}}</td>
        <td>
        <button class="btn btn-warning" ng-click="editInfo(detail)" title="Preiau client"><span class="glyphicon glyphicon-edit"></span></button>
        </td>

    </tr>
</table>

I can`t find a function that will refresh the table at a few seconds automatically, to reload the new data. Is there a way to do this without refreshing the page manually or clicking a button?

I have a function which refreshes a span but I don`t know how to adapt it to Angular:

<script type="text/javascript">
function refreshDiv() 
{
    $("#refresh").load("includes/assets/receptie_clienti/databaseFiles/get_client_count.php");

} 
window.setInterval(refreshDiv, 1000);
</script>

And HTML: <span id="refresh">0</span> //Initial value is 0 and it changes when new values are adeed to database

LE: Fixed like the answer selected:

Modified AngularJS Controller:

var ClientsApp = angular.module('ClientsApp',[]);
ClientsApp.controller("DbController",['$scope','$http','$interval', function($scope,$http,$interval){
// Refresh the data automatically to get clients details from the database
$interval(callAtInterval, 1000);
function callAtInterval() {
    $http.post('includes/assets/receptie_clienti/databaseFiles/get_clients.php').success(function(data){
// Stored the returned data into scope 
$scope.details = data;
});
}

Pengyy · Accepted Answer · 2017-07-17 08:22:06Z

1

try to refresh details use $interval in your controller.

$interval(function() {
  $scope.detail = 'call your getData service here';
}, 1000);

ClientsApp.controller("DbController",['$scope','$http', $interval, function($scope,$http,$interval){
  ...
}

edited Jul 17, 2017 at 8:22

answered Feb 17, 2017 at 23:18

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bogdan2305 Over a year ago

$interval is an id?

Bogdan2305 Over a year ago

This is Angular controller:

var ClientsApp = angular.module('ClientsApp',[]); ClientsApp.controller("DbController",['$scope','$http', function($scope,$http){  // Function to get employee details from the database getInfo(); function getInfo(){ // Sending request to EmpDetails.php files  $http.post('includes/assets/receptie_clienti/databaseFiles/get_clients.php').success(function(data){ // Stored the returned data into scope  $scope.details = data; }); }

Pengyy Over a year ago

$interval is a angular service provider, like window.setInterval. you can inject it at your controller

Bogdan2305 Over a year ago

I did it like this: var ClientsApp = angular.module('ClientsApp',[]); ClientsApp.controller("DbController",['$scope','$http','$interval', function($scope,$http,$interval){ $interval(function() { $scope.detail = 'includes/assets/receptie_clienti/databaseFiles/get_clients.php'; }, 1000); ... in my Angular js script.

Bogdan2305 Over a year ago

Nothing happens after I adeed that code in angular script. No error in console.

|

Collectives™ on Stack Overflow

Load AngularJS Data to table on automatic refresh

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related