如何使用角度僅改變按鈕的顏色幾秒鐘？

我想讓我的按鈕在點擊時改變顏色。也只能改變它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函數，但是，不知道如何將它與角度和改變顏色結合起來。

對建議感到滿意！謝謝！

來源

2016-08-19 javascript2016

您可以在這裏用$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

來源

2016-08-19 19:43:36

謝謝！但是你知道我的代碼爲什麼不能改變顏色嗎？無論何時 – javascript2016

要返回到原始類，您必須單擊它兩次，然後才能使用 –

如何將按鈕更改爲原始類而不必再次單擊？此外，既不改變原來的類工程，也沒有改變（它不會改變顏色爲綠色） – javascript2016

更好使用$interval然後在這種情況下超時

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

來源

2016-08-19 19:59:26

如何使用角度僅改變按鈕的顏色幾秒鐘？

回答

相關問題