AngularJS - how to show an alert when the length of an array is zero and hide the default behavior?


Tags: javascript,css,angularjs

Problem :

I am working with angular and I am showing a little loading circle which disappears once the content is loaded. that circle is just a CSS class that I am calling from my html only the 1st time that the page load, I am doing it this way:

actually the circle has to classes: .circle and .loader within circle ...

<div ng-hide="lineItems.length" class="circle">
 <div class="loader"></div>
</div>

as you can see below there is a promise with an if which says that if linesItems.length is zero then show myModal. everything is working properly but the loading circle still shows up, what I need to do is completely remove that .circle and .loader once the condition inside the if is reached.

.then(function(lines) {
  $scope.lineItems = lines;
  if ($scope.lineItems.length === 0) {
   myModal.show();
   console.log('I AMN EMPTY');
  }else {
   loaderAlert.hide();
  }
 }

someone says that I have to use an $scope variable but I do not have an idea of how to do it, I am new to Angular, is there any other way?



Solution :

When you start your promise, set a flag to state you are currently loading. Then when loading finishes, set the flag to false. Use this with ng-class or ng-if to make the appearance of the circle conditional.

function doStuff(){
    $scope.loadingIsHappening = true;
    myService.getStuff().then(function(){

       // your processing here

    }).finally(function(){
        $scope.loadingIsHappening = false;
    });
}

HTML:

 <!-- ng-if removes from DOM, while ng-hide modifies CSS display to none-->
<div ng-if="loadingIsHappening == true" class="circle">
    <div class="loader"></div>
</div>

    CSS Howto..

    How important is it to be leaving out the last ';' inside a set of CSS rules

    How can I change Bootstrap table-striped in a less specific way?

    How to change the color of item selection radcombobox with a css style?

    div shown with jquery is cropped

    Bootstrap How to make a responsive grid degradating in two steps?

    How to fix clipped text over 3D transform image on Safari?

    Slideshow image with buttons

    Building a DOS-feel script. How to make the command line?

    How to apply advanced styling for all portlets of one kind

    How to get my navigation bar to be vertically centered

    How to make a simple pure css or jquery image toggle?

    How can I stop an image element from taking 100% width?

    CSS styling - how to put these two div boxes adjacent

    How to add a background to a boostrap grid row (including padding!)?

    CSS: How to add borders of different colors to input radio buttons labels?

    How to have different transistions for background-image and text in a div using CSS

    How to apply focus css for all drop downs?

    How to set a width of the background (HTML and CSS)

    CSS Grow on hover adds padding to the bottom of an image, how do I stop this from happening?

    How to make semi-transparent background [duplicate]

    How did he get the sidebar to remain on the left, even as the right side of the page can scroll?

    How to include button text and links as part of css

    How to vertical-align text on this input box for IE

    how to add class with animation?

    Simple slideshow not working properly

    How do I go about targeting the literal “first-child” of a div, styling depending on element type

    How to force text to wrap inside inline-block div?

    How to hide elements in navbar until hover in css?

    How to include php page which include also a css file?

    How to make a child div to grow to full screen using CSS?