Refresh list after server callback in AngularJS

Question

I fetch a collection from the server and I would like to get detail for each item. All requests are received correctly, but the paragraph Loading... doesn't hide.

<h2 ng-repeat-start="server in hypervisors track by server.ip | orderBy:server.ip">
    {{server.ip}}
</h2>
<div ng-repeat-end>
    <p ng-hide="{{server.loaded}}" class="ng-hide">Loading...</p>

When I uncomment the line in controller before post everything works fine.

vmwareStatusApp.controller('Home', function ($scope, $http) {
    $http.post('Home/ListHypervisors').success(function (data) {
        $scope.hypervisors = data;
        $scope.listLoaded = true;

        $scope.hypervisors.forEach(function (item) {
            //item.loaded = true; // this line works
            $http.post('Home/HostInfo', { 'ip': item.ip }).success(function (data) {
                $scope.hypervisors[0].loaded = true;
                    item.loaded = true;
                    item.detail = data;
                })
                .error(function(data) {
                    item.loaded = true;
                    item.error = data;
                    item.displayError = true;
                });
        });
    });
});

There are many posts about refreshing view, but I haven't found any working for me. Neither anti-patter with calling $digest() didn't work, because of multiple callback. Which part of AngularJS tutorial have I skipped?

Okazari · Accepted Answer · 2015-06-24 16:01:49Z

2

Just remove the braces from your ng-hide like this

ng-hide="server.loaded"

ng-hide and angular directives should be read like this :

ng-directive = "somethingAngularWillInterpret"

The opposite exemple is in your HTML angular will not know what he should interpret instead of just showing some text

<b>server.loaded</b> will show a bold "server.loaded"

To notice angular that he need to interpret we will use the braces

<b>{{somethingAngularWillInterpret}}</b> will show a bold result of the interpretation

EDIT :

So doing this ng-hide="{{server.loaded}}" is probably saying to angular to interpret the result of the server.loaded interpretation like a var named true or a var named false (just speculation, i need to try it).

Just tested it, this just lead to a syntax error.

edited Jun 24, 2015 at 16:01

answered Jun 24, 2015 at 15:45

Okazari

4,5971 gold badge17 silver badges27 bronze badges

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

3 Comments

Okazari Over a year ago

@JanZahradník I edited and added some more information. If this solve your problem, don't forget to mark this as a valid answer. And btw, don't look at $digest or $apply. You don't need it in 99% of angular use cases and could lead to performances issues

Jan Zahradník Over a year ago

Many thanks for explanation, now the difference is clear for me. Btw. how can you check the syntax of Angular? It can prevent such questions, but Chrome doesn't complained.

Okazari Over a year ago

@JanZahradník the chrome javascript console just gave me an error when i tried this syntax. The expression was invalid starting by {

Collectives™ on Stack Overflow

Refresh list after server callback in AngularJS

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