angular JS refresh a http

Question

i am trying to make an agenda with contacts and i just started learning AngularJS. So far i did a php that generates me a JSON, load it on angular controller and than show it on html.

This is the angular code

var Agenda = angular.module('Agenda', []);

Agenda.controller('Contacts', function($scope, $http) {
    $http.get('php/contacts.php').success(function(data) {
        $scope.jsonContacts = data;
    });
});

And this is the HTML

<section class="agenda" ng-app="Agenda">
        <ul ng-controller="Contacts">
            <li ng-repeat="contact in jsonContacts">
                <div class="col1">{{contact.contact_id}}</div>
                <div class="col2">{{contact.contact_firstname + ' ' + contact.contact_lastname}}</div>
                <div class="col3">{{contact.contact_phone}}</div>
                <div class="col4">{{contact.contact_email}}</div>
            </li>
        </ul>

        <a>Refresh</a>
    </section>

So far so good but now i am trying to refresh the content of the list when i press on the Refresh and i have no idea how to do that. If i also did something wrong in this code please let me know.

Thank you in advance, Daniel!

jandersen · Accepted Answer · 2013-08-28 23:33:40Z

3

You're more than half way there! Here's a few slight tweaks to what you have that should do the trick. Turn your $http call into a function that we can invoke repeatedly - refresh():

Agenda.controller('Contacts', function($scope, $http) {
    $scope.refresh = function() {
        $http.get('php/contacts.php').success(function(data) {
            $scope.jsonContacts = data;
        });
    }

    // call it initially
    $scope.refresh();
});

And then simply use ng-click to call the new refresh() function that we added above:

<section class="agenda" ng-app="Agenda">
        <ul ng-controller="Contacts">
            <li ng-repeat="contact in jsonContacts">
                <div class="col1">{{contact.contact_id}}</div>
                <div class="col2">{{contact.contact_firstname + ' ' + contact.contact_lastname}}</div>
                <div class="col3">{{contact.contact_phone}}</div>
                <div class="col4">{{contact.contact_email}}</div>
            </li>
        </ul>

        <a ng-click="refresh()">Refresh</a>
    </section>

answered Aug 28, 2013 at 23:33

jandersen

3,56124 silver badges23 bronze badges

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

1 Comment

Pacuraru Daniel Over a year ago

WOW this is simple yet amazing at the same time. Thank you very much, jandersen!

Collectives™ on Stack Overflow

angular JS refresh a http

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related