No data found showing on page loading in AngularJS

Question

I am displaying some data, so while the page is loading, "No data found" control is working, what should I do to prevent this ? Here is my code

 <ul id="owl-example" class="list-unstyled topContributors">
                    <li ng-show="TopContributors.length==0">
                        <p><span style="color: red; font-weight: bold;">No Contributors....</span></p>
                    </li>
                    <li ng-repeat="contributors in TopContributors">
                        <img ng-src="{{contributors.AccountName}}" />

                        <div class="contName">
                            <p>{{contributors.UserName}}</p>
                        </div>

                    </li>
                </ul>

Where is 'no data' defined? Perhaps in a function that loads TopContributors? — Alex
– Alex, Commented Jun 6, 2016 at 11:58

E. Abrakov · Accepted Answer · 2016-06-06 12:07:07Z

1

You can add a flag to hide "No Contributors...." until the request is not completed

<li ng-show="TopContributors.length==0 && flag">
  <p><span style="color: red; font-weight: bold;">No Contributors....</span></p>
</li>

answered Jun 6, 2016 at 12:07

E. Abrakov

4632 silver badges6 bronze badges

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

Comments

Nikhilesh K V · Accepted Answer · 2016-06-06 13:15:49Z

1

I think the below code is enough to achieve what you want rather than adding a flag:

<li ng-show="TopContributors && TopContributors.length==0">

answered Jun 6, 2016 at 13:15

Nikhilesh K V

1,48013 silver badges20 bronze badges

Comments

rrd · Accepted Answer · 2016-06-06 12:08:24Z

In your controller (written in es6, but you get the drift):

export default class MyController extends Base {
  constructor() {
    super(arguments);
    this.loading = true;
    this.loadData();
  }

  loadData() {
    // Assumes data loaded correctly;
    someCodeLoadingData();

    this.loading = false;
  }
}

In your template:

<li ng-show="TopContributors.length === 0 && vm.loading === false">
  <p>No Contributors....</p>
</li>

Put your styling in a stylesheet, keep your templates clean. The vm (in my case at least) comes from our Base where vm = this;

Rahul Arora · Accepted Answer · 2016-06-06 12:55:12Z

0

Use can use ng-cloak to achieve this in case data is not coming from an API using AJAX call. Basically it will wait for the variable to load before performing any function on that div or element Add ng-cloak to your ng-show statements as shown below:

<ul id="owl-example" class="list-unstyled topContributors">
    <li ng-show="TopContributors.length==0" ng-cloak>
        <p><span style="color: red; font-weight: bold;">No Contributors....</span></p>
    </li>
    <li ng-repeat="contributors in TopContributors">
        <img ng-src="{{contributors.AccountName}}" />

        <div class="contName">
            <p>{{contributors.UserName}}</p>
        </div>

    </li>
</ul>

In your css file write:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
 display: none !important;
}

If it is coming using an AJAX call, you can setup a flag while the call is in progress and update it when you achieve success.

edited Jun 6, 2016 at 12:55

answered Jun 6, 2016 at 12:10

Rahul Arora

4,5431 gold badge19 silver badges25 bronze badges

7 Comments

Wagner Danda da Silva Filho Over a year ago

Have u actually tested this? How is ng-cloak supposed to know that this variable was actually loaded? what if its happening thru a promise that takes a bit to load? My impression for ng-cloak is that you use it for other purpose, this taken from the angular docs: "used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading."

Rahul Arora Over a year ago

The ng-cloak directive prevents the document from showing unfinished AngularJS code while AngularJS is being loaded. AngularJS applications can make HTML documents flicker when the application is being loaded, showing the AngularJS code for a second, before all code are executed. Use the ng-cloak directive to prevent this.

Wagner Danda da Silva Filho Over a year ago

I get how ng-cloak works, its recommended for prevent flickering while templates are being loaded/compiled, however, OP hasn't shared with us his js code so we just have to make assumptions as to how he is loading the TopContributors variable. If that is coming from a backend service - which will be async - then angular's ng-cloak won't be effective as most likely the templates will be loaded and compiled way before his service gets resolved and his variable gets updated. Also, are you sure u need that CSS override for ng-cloak? Isn't that by default?

Rahul Arora Over a year ago

No ng-cloak works in conjunction with that CSS you can. Check this for details docs.angularjs.org/api/ng/directive/ngCloak Also your argument that it wont work for async calls, that is correct and for that you can setup a flag. But OP has not shared that so I did not recommend doing that unnecessarily.

Rahul Arora Over a year ago

Updated my answer as per the discussion.

|

Wagner Danda da Silva Filho · Accepted Answer · 2016-06-06 12:55:27Z

The usual suggestion here recommends adding a variable for loading status. I don't think you even need that.

Besides adding ng-cloak to avoid template loading flickering, I'd suggest you default your TopContributors variable to a negative value, this way will ensure your div isn't displayed while you wait for it to load it (from a backend service I'd assume). Example:

function topContributorsController(...) {
    $scope.TopContributors = -1; // 'not loaded' state

And here is the change to your template to add ng-cloak:

<ul id="owl-example" class="list-unstyled topContributors" ng-cloak>

Collectives™ on Stack Overflow

No data found showing on page loading in AngularJS

5 Answers 5

Comments

Comments

Comments

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

7 Comments

Comments

Related