AngularJS Reload button?

Question

I have a problem with adding a method to refresh loaded data using a button. My Controller:

.controller('mainCtrl', function($scope, $http, User) {
        $scope.loading = true;

        User.get()
            .success(function(data) {
                $scope.users = data;
                $scope.loading = false;
            });
    });

Service:

angular.module('userService', [])

    .factory('User', function($http) {

        return {
            get : function() {
                return $http.get('/api/users/get');
            }
        }

    });

And this is how my view looks like:

<div class="box" ng-app="userApp" ng-controller="mainCtrl">
                <div class="box-header">
                    Angular Test <button class="btn btn-success" ng-click="get()"><i class="fa fa-refresh"></i> Reload</button>
                </div>
                <div class="box-body">
                    <p class="text-center" ng-show="loading"><span class="fa fa-meh-o fa-5x fa-spin"></span></p>
                    <table ng-hide="loading" class="table table-responsive">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Username</th>
                                <th>Realname</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="user in users">
                                <td>@{{ user.id }}</td>
                                <td>@{{ user.name }}</td>
                                <td>@{{ user.realname }}</td>
                                <td>@{{ user.email }}</td>
                                <td>@{{ user.phone }}</td>
                                <td>
                                    <a href="/admin/profile/@{{ user.id }}" class="btn btn-block btn-primary btn-sm">
                                        <i class="fa fa-user" aria-hidden="true"></i> Profile
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

As you can see there, I tried to have a reload button which is using ng-click="get". However this does nothing. What do I need to call there?

Can you try with ng-if instead of ng-hide/ng-show and replace $scope.loading = true by false and $scope.loading = false by true? Do you get all the data in your controller? Have you checked with a console.log? — Wandrille
– Wandrille, Commented Oct 7, 2016 at 12:13
Loading data is working. It's only that the button is not triggering a reload. — xTheWolf
– xTheWolf, Commented Oct 7, 2016 at 12:16
Sorry, I haven't seen. Where is defined your function get? It musst be defined in your controller. — Wandrille
– Wandrille, Commented Oct 7, 2016 at 12:19
@Guedes This belongs in the controller, right? This is sadly not working. — xTheWolf
– xTheWolf, Commented Oct 7, 2016 at 12:20
@Wandrille It is defined in the controller...? You can see that in the questions code — xTheWolf
– xTheWolf, Commented Oct 7, 2016 at 12:21

nagyf · Accepted Answer · 2016-10-07 12:46:53Z

3

You have to create a new function in the controller to get the user data, and assign it to the scope, this way you can call it from the template as you wanted.

.controller('mainCtrl', function($scope, $http, User) {


    function get() {
        $scope.loading = true;
        User.get()
            .success(function(data) {
                $scope.users = data;
                $scope.loading = false;
            });
    }

    // Assign the get function to the scope
    $scope.get = get;

    // Call the get function when the controller is created
    get();
});

edited Oct 7, 2016 at 12:46

answered Oct 7, 2016 at 12:25

nagyf

8695 silver badges17 bronze badges

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

3 Comments

xTheWolf Over a year ago

Awesome, this works like expected. Thank you very much.

xTheWolf Over a year ago

$scope.user is not working. took that from a tutorial. I assume it is users because of the loop in the view?: <tr ng-repeat="user in users">

nagyf Over a year ago

Sorry, I've overlooked that ng-repeat

Collectives™ on Stack Overflow

AngularJS Reload button?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related