Execute expression when you finish fetching data using Http AngularJs

Question

Execute expression when you finish fetching data using Http AngularJs

Navigation

#1 by (1 votes)

0

I am trying to make that when I give click to checkbox an expression is executed when it has finished bringing the datos of the function getUsers() , apparently it works fine.

But then what I want to do is to deactivate or disable the checkbox until it has not finished loading the first call to the request. That is, they can not give more click until they have brought the data , records .

PS: If you have a service that takes a long time 30 seconds or more, then deactivate the checkbox or some other way to avoid giving click to the checkbox

var app = angular.module('App', ['ngMaterial', 'ngMessages']);
    app.controller('AppCtrl', function($scope, $timeout, $q, $http) {

        $scope.getUsers = function() {
            return $q(function(resolve,reject) {
                $http.get('https://jsonplaceholder.typicode.com/users').then(function(res) {
                    $scope.users = res.data;
                    resolve();
                });
            });
        };

        $scope.filterUsers = function() {
            setTimeout(function() {
                $scope.getUsers().then(function() {
                    console.log("Termino de traer los datos");
                });
            });           
        }

        $scope.getUsers();
    });

<!DOCTYPE html>
<html ng-app="App">

<head>
	<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-aria.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-messages.js"></script>
	<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>

	<script src="script.js"></script>
</head>

<body ng-controller="AppCtrl">
	<div flex="30" layout="row" layout-align="end center">                
        <md-checkbox class="md-color-blue" style="margin: 0;" ng-model="filterUser" ng-click="filterUsers()" aria-label="user filter">
         Filtrar usuarios
        </md-checkbox>
    </div>
</body>

</html>

javascript html angularjs angular-material

asked by zerokira 31.10.2018 в 14:26

source

1 answer

Error converting DropDownList to Int32 make a conditional only affect a certain number of elements with the same attribute

score 1 · Answer 1

Add the ng-disabled attribute to your check:

<md-checkbox class="md-color-blue" style="margin: 0;" ng-model="filterUser" ng-click="filterUsers()" aria-label="user filter" ng-disabled="disable"> Filtrar usuarios </md-checkbox>

declares the variable disable and if this is true it will be deactivated and if it is false the check will be activated.

$scope.disable = true;

And you should only add that when filterUsers is run, put the value of disable in false and when the data is loaded it will be put in true .

$scope.filterUsers = function() { 
$scope.disable = false;
setTimeout(function() { 
   $scope.getUsers().then(function() { 
    console.log("Termino de traer los datos");
$scope.disable = true;
     });  
  }); 
}