Question

我想让我的按钮在点击时改变颜色。也只需将其更改3秒钟，然后再返回默认颜色。我一直在寻找关于堆栈溢出的类似问题，但无论我尝试过什么都没有工作（不知道为什么我的代码不工作）。另外我不知道如何让它改变颜色只有3秒。到目前为止我 1. $ scope.isActive = false; 2.然后在控制器中，如果点击，我将其更改为true：

$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函数，但是，不知道如何将它与角度组合并改变颜色..

对建议感到高兴！谢谢！

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课程放在button上

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

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

Demo Here

Answer 2

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

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

如何使用角度改变按钮的颜色只有几秒钟？

2 个答案: