Angulaire un: fonction de temporisation javascript

J'essaie d'appeler une fonction basée sur une valeur d'entrée. Le scénario va: si personne ne va ajouter quelque chose dans cette entrée pendant 10 secondes (donc la valeur sera nulle), rendre cette entrée désactivée. Je voudrais utiliser ng-change ou quelque chose de similaire à partir de méthodes angulaires au lieu de toutes les conditions de "clavier".Angulaire un: fonction de temporisation javascript

Maintenant le premier pense à faire est de régler la minuterie à 0 lorsque le bouton est cliqué et en comptant à 10.

angular.module('myApp', []) 
    .controller('myCtrl', ['$scope', function($scope) { 
    $scope.count = 10; 
    $scope.inpValue = ''; 

    function myFunction() { 
    setTimeout(function() { 
     if ($scope.inpValue.length === 0 && $scope.count >= 10) { 
     alert("Execute function when if is true"); 
     } 
    }, 1000); 
    }; 
    myFunction(); 

}]);

JSFIDDLE:

Source

2017-09-18 mcmwhfy

Cela ne résout pas votre problème, mais: En AngularJS, vous devez utiliser le service de délai d'attente de $ au lieu de setTimeout. La détection des modifications d'Angularjs ne fonctionne pas correctement à moins que vous ne le fassiez. https://docs.angularjs.org/api/ng/service/$timeout –

Quel est le but du bouton 'Fermer quand il atteint 10' dans le violon? – Sajal

@Sajal Cela devrait appeler la fonction sur le clic, fondamentalement, je peux appeler myFunction sur le changement d'entrée en utilisant ng-change ou sur ce bouton en utilisant ng-click. Est-ce l'un ou l'autre. – mcmwhfy

Bien que l'énoncé du problème est ambigu, ce qui est probablement ce que vous avez besoin.

Si aucune valeur n'est entrée dans la zone input, elle sera désactivée dans 10 secondes.
Si la valeur est modifiée, le temporisateur resets est défini par défaut et est réexécuté. Le bouton
Close on 10 réinitialise également la minuterie, mais le bouton obtient disabled une fois que vous avez cliqué dessus. Il obtient seulement enabled lorsque la valeur de la boîte input change.

angular.module('myApp', []).controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout) { 
 
    $scope.count = 1; 
 
    $scope.inpValue = ""; 
 
    $scope.disableInput = false; 
 
    $scope.disableBtn = false; 
 

 
    $scope.checkToDisable = function() { 
 
    console.log($scope.count); 
 

 
    $scope.customTimeout = $timeout(function() { 
 
     if ($scope.inpValue.length === 0 && $scope.count == 10) { 
 
     $scope.count = 0; 
 
     $scope.disableInput = true; 
 
     $scope.disableBtn = true; 
 
     $timeout.cancel($scope.customTimeout); 
 
     } else { 
 
     $scope.count++; 
 
     $scope.checkToDisable(); 
 
     if ($scope.count > 10) { 
 
      $timeout.cancel($scope.customTimeout); 
 
     } 
 
     } 
 
    }, 1000); 
 
    }; 
 

 
    $scope.resetTimer = function() { 
 
    $scope.count = 1; 
 
    $timeout.cancel($scope.customTimeout); 
 
    $scope.checkToDisable(); 
 
    }; 
 

 
    $scope.checkToDisable(); 
 

 
}]);

button { 
 
    border: none; 
 
    padding: 5px 2px; 
 
    border-radius: 4px; 
 
    box-shadow: inset 1px 1px 4px red; 
 
} 
 

 
button:active { 
 
    background: orange; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
    <div ng-controller="myCtrl"> 
 
    <input type='text' ng-model="inpValue" ng-change="resetTimer(); disableBtn = false;" ng-disabled="disableInput" /> 
 
    <button ng-click="resetTimer(); disableBtn = true;" ng-disabled="disableBtn">Close when it reaches 10</button> 
 
    </div> 
 
</body>

Source

2017-09-18 13:02:40 Sajal

oui, quelque chose comme ça, besoin également d'arrêter le compteur après l'entrée a une valeur mais je peux faire face à cela :) ty – mcmwhfy

Voici une approche qui est peut-être utile de continuer:

HTML:

<body ng-app="myApp"> 
    <div ng-controller="myCtrl"> 
    <input type='text' ng-model="inpValue" placeholder='Something here' ng-change="myFunction()" /> 
    <button>Close when it reaches 10 
    </button> 
    </div> 
</body>

JavaScript

angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope) 
{ 
    $scope.count = 10; 
    $scope.inpValue = ''; 

    function myFunction() { 
    setTimeout(function() { 
     if ($scope.inpValue.length === 0 && $scope.count >= 10) { 
     alert("Execute function when if is true"); 
     } 
    }, 10000); 
    }; 
    myFunction(); 

}]);

Échantillon complet: https://jsfiddle.net/Lv2Lb1a6/1/

Source

2017-09-18 12:19:01 Eliasib13

Angulaire un: fonction de temporisation javascript

Répondre

Questions connexes