如何使用 angular 仅在几秒钟内更改按钮的颜色？

Question

我希望我的按钮在点击时改变颜色。也只需更改它 3 秒，然后返回默认颜色。我一直在查看有关堆栈溢出的类似问题，但无论我尝试什么，它都不起作用（不知道为什么我的代码不起作用）。我也不确定如何让它只改变颜色 3 秒。到目前为止我 1. $scope.isActive=假； 2. 然后在控制器中，我将其更改为 true if clicked:

$scope.copyText = function(text){
  $scope.isActive = !$scope.isActive;
  console.log('clicked in controller');
  Clipboard.copy(text)
}

html:

<div class="inner-single" ng-hide="updateInfo">
    <h3>Login Details:</h3>
    <h5 ><span class="categories">Username:</span> {{account.username}}<button 
         ng-click="copyText(account.username)" ng-class="isActive ? 'noColor' : 'hasColor'" >
    Copy</button></h5>    
  <button class="btn btn-large btn-default" ng-click="showForm()">Update Info</button>

CSS

 .copy-button {
  .copy-button.hasColor {
    color:green;
  }
  .copy-button.noColor {
   color: grey; }
  font-size: 12px;
  padding: 0px, 3px, 0px, 3px;
  margin-left: 5px; }
}

为了跟踪秒数，我会使用 setTimeout 函数，但是，不确定如何将它与 angular 结合并更改颜色..

很高兴收到建议！谢谢！

Answer 1

你可以在这里使用 $timeout 和 3000（3 秒），然后在那边再次预设 isActive 标志。

代码

$scope.copyText = function(text){
  $scope.isActive = !$scope.isActive;
  console.log('clicked in controller');
  Clipboard.copy(text);
  //don't forget to add `$timeout` in controller dependency.
  $timeout(function(){
      $scope.isActive = !$scope.isActive;
  }, 3000);
}

您的 CSS 规则似乎不正确，您必须更正它们或以其他方式将 copy-button class 置于 button

之上

.copy-button.hasColor {
  color: green;
}

.copy-button.noColor {
  color: grey;
}

Demo Here

Answer 2

在这种情况下最好使用 $interval 然后超时

 let stuff = $interval(function() {
           do stuff
      }, 100);
  };

如何使用 angular 仅在几秒钟内更改按钮的颜色？

How to change the color of a button for only a few seconds using angular?

settimeout

angularjs

ng-class