Question

我有一个场景，我需要在用户提供输入时显示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：

 <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秒后停止提供任何输入时它应该消失。

任何帮助都将不胜感激。

Answer 1

我对您的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);  
  }
});

Answer 2

您应该清除超时时间：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);
  }
}

Answer 3

我得到了以下代码：

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

在控制器中写下这个并将"divShow" id赋予div并删除ng-show。

这对我有用，希望帮助你。

在给出输入显示div之后的某个时间

3 个答案: