入力時にshow divを入力した後

私は、ユーザーが入力を提供するときにdivを表示する必要があるシナリオがあります。入力時にshow divを入力した後

ユーザーが入力値を継続的に変更する場合、divを表示する必要があります。ユーザーが5秒後に入力を停止すると、divは非表示にする必要があります。

Ctrlキー：

function MainCtrl($scope,$timeout) { 
    $scope.appear = false; 
    $scope.showDiv = function() { 
    debugger; 
    $scope.appear = true; 
    } 
    $scope.$watch('appear', 
    function(newValue, oldValue) { 
    if(newValue && newValue===true){ 
     $timeout(function(){ 
      $scope.appear=false; 
     }, 5000); 

    } 
    } 
); 
}

HTML：私は連続して入力にそれが隠されてきている時間のある時点でのdivを提供する際

<body ng-controller="MainCtrl"> 
    Name: <input type="text" ng-change="showDiv()" ng-model="inputText"/> <br/> 

    <div ng-show="appear">Content</div> 
</body>

DEMO

私はここに直面しています問題があります再度出現する。

しかし、入力が提供されるまでdivを表示する必要があり、ユーザーが5秒後に入力を停止すると消えるはずです。

ご協力いただければ幸いです。

出典

2017-03-21 tania saxena

私はあなたのplunkrにいくつかの変更を行った、https://plnkr.co/edit/EsiG3Ifgk0maYF4GJTGm?p=preview

angular.module('plunker', []).controller('MainCtrl',function($scope,$timeout) { 
    $scope.appear = false; 

    $scope.timerId; 
    $scope.showDiv = function() { 

     if($scope.timerId!=undefined){ 
     clearTimeout($scope.timerId); 
    } 
    $scope.appear = true; 
    $scope.timerId = $timeout(function(){ 
     $scope.appear=false; 
    },5000); 
    } 
});

出典

2017-03-21 06:40:01

このリンクをチェックし、私は、コードの作業の下になった：

$scope.showDiv = function() { 
    alert(1); 
    $('#divShow').show(); 
    setTimeout("$('#divShow').hide();", 5000); 
}

は、コントローラでこれを書いて、DIVにその"divShow" IDを与え、 ng-showを削除します。

これは私のために働いてくれました。

出典

2017-03-21 06:48:16

あなたのタイムアウトをクリアする必要があります：https://plnkr.co/edit/wY4C1wvBZKJ7RSwtgnCv?p=preview

angular.module('plunker', []); 

function MainCtrl($scope,$timeout) { 
    var timeout; 
    $scope.appear = false; 
    $scope.showDiv = function() { 
    // debugger; 
    $scope.appear = true; 

    if(timeout) { 
     console.log('timeout') 
     $timeout.cancel(timeout); 
    } 

    timeout = $timeout(function(){ 
     $scope.appear=false; 
    }, 5000); 
    } 
}

出典

2017-03-21 06:50:45 kaxi1993

入力時にshow divを入力した後

答えて

関連する問題