Create and maintain a loadbar while a function is called

Question

Create and maintain a loadbar while a function is called

Navigation

#1 by (0 votes)

0

I need to create a loadbar and leave it active until the function is finished. Can I do this in the angle?

$scope.getPosts = function () {
    $http({
        method: 'POST',
        url: '/getPosts',
    }).then(function(response) {
        return response.data;
    }, function(error) {
        console.log(error);
    });
};

angularjs html5

asked by anonymous 24.01.2018 / 14:23

1 answer

scrollTo effect stopped working in Google Chrome after upgrade, what to do? How to store another page (web form) in a variable Page asp.net

score 0 · Accepted Answer

Yes, it is possible.

Basically you will control the loader using the ng-if directive.

See an example:

angular.module('app', []).controller('mainController', mainController);

function mainController($http) {
  let ctrl = this;
  ctrl.loading = false;

  ctrl.iniciar = () => ctrl.loading = true;
  ctrl.parar = () => ctrl.loading = false;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="app" ng-controller="mainController as main">
  <div ng-if="main.loading">
    Carregando <br>
    <i class="fa fa-spinner fa-spin"></i>
  </div>
  <button ng-click="main.iniciar()">Iniciar</button>  
  <button ng-click="main.parar()">Parar</button>
</div>