CODEWITHSUNDEEP
angularjs
Sridhar Paiya
Sridhar Paiya

Reputation: 478

No data found showing on page loading in AngularJS

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>

Upvotes: 2

Views: 926

Answers (5)

Nikhilesh K V
Nikhilesh K V

Reputation: 1480

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

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

Upvotes: 1

Wagner Danda da Silva Filho
Wagner Danda da Silva Filho

Reputation: 5407

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>

Upvotes: 0

Rahul Arora
Rahul Arora

Reputation: 4523

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.

Upvotes: 0

rrd
rrd

Reputation: 5957

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;

Upvotes: 0

E. Abrakov
E. Abrakov

Reputation: 463

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>

Upvotes: 1

Related Questions