Execute functions simultaneously from the controller in AngularJS

Question

Execute functions simultaneously from the controller in AngularJS

Navigation

#1 by (0 votes)

0

Only one function is executed and not the 3 that I request ..

HTML:

<form class="form-inline text-center">
   <div class="form-group col-xs-6">
      <label for="puns">Puntualidad primera compra: </label>
      <select class="form-control" id="puns">
          <option ng-repeat="ps in vmGeneradorconfig.puntualidades">{{ps.des_puntualidad}}</option>
      </select>
   </div>
   <div class="form-group col-xs-6">
        <label for="puna">Tiempo que fue puntualidad 'A' :</label>
        <select class="form-control" id="puna">
            <option ng-repeat="p in vmGeneradorconfig.puntualidada">{{p.des_puntualidada}}</option>
        </select>
    </div>
</form>

CONTROLLER (ANGULARJS):

(function() {
    'use strict';
     angular.module('generadorconfig').controller('Generadorconfig', 
     ['SvConfiguracion','$scope','$state',
         function(SvConfiguracion, $scope, $state) {
        vmGeneradorconfig.consultaPuntualidadA = function () {
            SvConfiguracion.consultaPuntualidadA().then(function(response){
                console.log("PUNTUALIDAD(Años): ");
                vmGeneradorconfig.puntualidada = response.data.response;
                console.log(vmGeneradorconfig.puntualidada);
            });
        }


        vmGeneradorconfig.consultaPuntualidades = function () {
            SvConfiguracion.consultaPuntualidades().then(function(response){
                console.log("PUNTUALIDADES(Tipos): ");
                vmGeneradorconfig.puntualidades = response.data.response;
                console.log(vmGeneradorconfig.puntualidades);
            });
        }

        vmGeneradorconfig.consultaSituacionesEspeciales = function () {
            SvConfiguracion.consultaSituacionesEspeciales().then(function(response){
                console.log("SITUACIONES ESPECIALES: ");
                vmGeneradorconfig.se = response.data.response;
                console.log(vmGeneradorconfig.se);
            });
        }

        angular.element(document).ready(function () {
            vmGeneradorconfig.consultaPuntualidadA()
            vmGeneradorconfig.consultaPuntualidades()
            vmGeneradorconfig.consultaSituacionesEspeciales()
        });

 }
]);
})();

javascript html5 bootstrap angularjs angular

asked by R. Quiñonez 31.08.2018 в 20:34

source

1 answer

Detect if a field is updated with Javascript or Jquery, without using a trigger Determine CDN online with asp-fallback-test-class

score 0 · Accepted Answer

If you want to load functions when entering a page or similar immediately, without waiting for images to load, style files, etc. . You must specify these functions without angular.element()

var app = angular.module('app', []);
app.controller('ctrl', ['$scope', '$timeout', function($scope, $timeout){
  $scope.texto1 = 'primera función';
  $scope.texto2 = 'segunda función';
  $scope.texto3 = 'tercera función';
  $scope.completed = false;
  
  var f1 = function(){
    $scope.texto1 += ' cargada';
  }
  
  var f2 = function(){
    $scope.texto2 += ' cargada';
  }
  
  var f3 = function(){
    $scope.texto3 += ' cargada';
  }
  
  $timeout(function(){
    f1();
    f2();
    f3();
    $scope.completed = true;
  }, 1000)
}])

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div ng-app="app" ng-controller="ctrl" class="container">
  <label ng-class="{'text-success': completed}">{{texto1}}</label><br>
  <label ng-class="{'text-danger': completed}">{{texto2}}</label><br>
  <label ng-class="{'text-info': completed}">{{texto3}}</label><br>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>