Question

我是AngularJS的新手，想点击按钮后隐藏它3秒钟后如何显示按钮。

请参阅下面的代码。

<button class="btn btn-primary" ng-click="showDiv=true" ng-show="!showDiv">Button</button>

由于

Answer 1

尝试使用$timeout服务

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
     $scope.showDiv = true;
    $scope.hide= function(){
         $scope.showDiv = false;
     $timeout(function () {
      $scope.showDiv = true;
    }, 3000);
    }
   
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button class="btn btn-primary" ng-click="hide()" ng-show="showDiv" >Button</button>
</div>

＆＃13;

Answer 2

使用控制器中的$ timeout服务并使用它来取消设置showDiv。

 app.controller('MyController', function ($scope, $timeout) {
    $scope.showDiv = true;
    $scope.enable= function () {
         $scope.showDiv =false; 
         $timeout(function () { $scope.showDiv = true; }, 3000);   
    };


  }

Answer 3

你也可以这样做

＆＃13;

angular.module("app",[])
.controller("ctrl",function($scope,$timeout){
$scope.showDiv=false;
$scope.timeout = $timeout;

$scope.saveFun = function(){ 
  $scope.showDiv=true;
}
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <button class="btn btn-primary"  ng-show="!showDiv" ng-click="timeout(saveFun,3000);">Save</button>
</div>

＆＃13;

Answer 4

尝试使用$ timeout这可能对您有所帮助

JS代码

  var app = angular.module('myApp', []);

  app.controller('ctrl', function($scope, $timeout) {
    $scope.hide = false;
    // function
    $scope.hideMe = function() {
      $scope.hide = true;
      var sec = 3000; // 3 seconds
      $timeout(function() {
        $scope.hide = false
      }, sec);
    };

  });

<强> HTML

<div ng-app='myApp'>

  <div ng-controller='ctrl'>
    <button class="btn btn-primary" ng-click="hideMe()" ng-hide="hide">Button</button>
  </div>
</div>

这是Jsfiddle link

使用AngularJS隐藏按钮并在3秒后显示

4 个答案: