Как изменить цвет кнопки всего за несколько секунд, используя angular?

Я хочу, чтобы моя кнопка меняла цвет при нажатии. Также измените его только на 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, однако не знаю, как объединить ее с angular и изменить цвет.

Рад предложениям! Благодарю вас!


angularjs settimeout ng-class
person javascript2016    schedule 19.08.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать $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;
}

Демо здесь

person Pankaj Parkar    schedule 19.08.2016
comment
спасибо! Но знаете ли вы, почему мой код не работает для изменения цвета? Независимо от времени - person javascript2016; 19.08.2016
comment
Чтобы вернуться к исходному классу, вам нужно дважды щелкнуть по нему, только тогда он будет работать - person Pankaj Parkar; 19.08.2016
comment
как я могу изменить кнопку на исходный класс без повторного нажатия кнопки? Кроме того, ни изменение исходного класса не работает, ни изменение вообще (он вообще не изменит цвет на зеленый) - person javascript2016; 19.08.2016
comment
@ javascript2016 для меня это должно работать .. мне создать демо? - person Pankaj Parkar; 19.08.2016
comment
да, это было бы здорово, потому что абсолютно ничего не работает! - person javascript2016; 19.08.2016
comment
@javascript2016 дай мне минутку - person Pankaj Parkar; 19.08.2016
comment
@javascript2016 посмотрите обновленный ответ - person Pankaj Parkar; 20.08.2016
comment
в моем случае это не работает - может быть, мне нужно что-то изменить в html? - person javascript2016; 20.08.2016
comment
Вам нужно только добавить класс copy-button на кнопку - person Pankaj Parkar; 20.08.2016

arrow_upward
1
arrow_downward

в этом случае лучше использовать $interval, чем тайм-аут

 let stuff = $interval(function() {
           do stuff
      }, 100);
  };
person ZEE    schedule 19.08.2016