角1：javascriptタイムアウト関数

入力値に基づいて関数を呼び出そうとしています。シナリオは次のようになります。誰もその入力に10秒間何も追加しない場合（値がnullになるため）、その入力を無効にします。 "キーボードの鍵"の代わりに角のメソッドからng-changeなどを使用したいと思います。ボタンをクリックすると、10角1：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"); 
     } 
    }, 1000); 
    }; 
    myFunction(); 

}]);

ここ

JSFIDDLE:

出典

2017-09-18 mcmwhfy

これはあなたの問題を解決するのではなく：angularjsでは、あなたの代わりにのsetTimeoutの$タイムアウトサービスを使用する必要があります。あなたがそうしない限りAngularjsの変更検出は正しく機能しません。 https://docs.angularjs.org/api/ng/service/$timeout –

フィヨルドでボタンが「10になったら閉じる」の目的は何ですか？ – Sajal

@Sajalこれは、クリック時に関数を呼び出す必要がありますが、基本的には、ng-changeを使用して入力変更またはng-clickを使用してそのボタンでmyFunctionを呼び出すことができます。 1つまたは別のものです。 – mcmwhfy

問題文が曖昧ですが、これはあなたが必要とするものと考えられます。

inputボックスに値を入力しないと、10秒後に無効になります。
値が変更された場合は、タイマresetsがデフォルトに戻り、再実行されます。
Close on 10ボタンもリセットされますが、ボタンは一度クリックするとdisabledとなります。 inputボックスの値が変更されると、enabledが得られます。

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>

出典

2017-09-18 13:02:40 Sajal

はい、そのようなものは、入力が値を持っている後にカウンタを停止する必要がありますが、私はそれを扱うことができます:) ty – mcmwhfy

にカウントされたときに今

最初はやると思うが0にタイマーを設定することがあるかもしれないあなたのために有用であるアプローチがあります続行します：

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(); 

}]);

全サンプル：https://jsfiddle.net/Lv2Lb1a6/1/

出典

2017-09-18 12:19:01 Eliasib13

角1：javascriptタイムアウト関数

答えて

関連する問題