如何使用角度仅在几秒钟内更改按钮的颜色？答案

【问题标题】：How to change the color of a button for only a few seconds using angular?如何使用角度仅在几秒钟内更改按钮的颜色？
【发布时间】：2016-08-19 19:40:34
【问题描述】：

我希望我的按钮在单击时改变颜色。也只需更改 3 秒钟，然后返回默认颜色。我一直在查看有关堆栈溢出的类似问题 postet，但无论我尝试过什么都不起作用（不知道为什么我的代码不起作用）。另外我不知道如何让它改变颜色只有 3 秒。到目前为止我 1. $scope.isActive=false； 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 结合并更改颜色..

对建议感到满意！谢谢！

【问题讨论】：

标签： angularjs settimeout ng-class

【解决方案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 类放在 button 上

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

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

Demo Here

【讨论】：

谢谢！但是你知道为什么我的代码不能改变颜色吗？无论何时
要回到原来的班级，你必须点击它两次，然后才可以工作
如何让按钮变为原来的类而无需再次点击？此外，既不更改为原始课程，也不更改（它根本不会将颜色更改为绿色）
@javascript2016 对我来说应该可以工作.. 我应该创建一个演示吗？
是的，那太好了，因为绝对没有任何效果！

【解决方案2】：

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

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

【讨论】：