как мигать кнопкой с помощью angularJs

Я разрабатываю приложение angularJs SPA. На моей html-странице переднего плана есть кнопка, при нажатии на которую она ожидает завершения операции. Я хотел бы, чтобы пользователь уведомил, что операция выполняется. Пока операция не завершится, я думаю о мигании кнопки или текста на кнопке или любом другом подходе, который люди могут использовать для данного сценария. Я открыт для предложений, таких как спиннеры на кнопке или что-либо, что передает пользователю правильное состояние.


javascript html css angularjs
person ari    schedule 23.03.2017    source источник
comment
Эта кнопка обрабатывается только один раз или может обрабатываться повторно, щелкая один за другим без обновления страницы? 1. выполнить один раз, я думаю, имеет смысл заменить кнопку какой-либо меткой загрузки, чтобы указать, что это однократная отправка. 2. выполнить несколько раз, вы можете отключить кнопку во время выполнения и иметь значок загрузки и включить кнопку после завершения обработки.   -  person YoungLearnsToCoding    schedule 23.03.2017
comment
На данный момент это один клик или одно событие отправки. Я согласен с вариантом 1, а также с вариантом 2. 1) кнопка включена при загрузке формы, 2) пользователь нажимает кнопку, чтобы начать операцию 3) необходимо передать пользователя с веб-страницы, выполняется операция 4) операция завершена, кнопка выключен. Как мне добиться этого с помощью angularJs?   -  person ari    schedule 23.03.2017
comment
$scope.formState = 1/2/3/4, как вы описали, ng-disabled=formState›1, ng-show=formState›1 &&formState//показать загрузку   -  person YoungLearnsToCoding    schedule 23.03.2017
comment
Разве это нельзя сделать чисто в CSS?   -  person Pie 'Oh' Pah    schedule 23.03.2017

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете добиться этого с помощью логической переменной.

Например:

$scope.inProgress = false;
$scope.someAction = someAction;

function someAction(){
   $scope.inProgress = true;

   //action here
   //on result
   $scope.inProgress = false;
}

После завершения операции установите переменную в false.

в HTML

    <button>
      <span ng-if="!inProgress">
        Submit
      </span>
      <span ng-if="inProgress">
        In progress
        <i class="glyphicon glyphicon-refresh glyphicon-spin"></i>
      </span> 
    </button>

Добавление некоторых стилей

button{
  padding:5px;
}
button span{
  margin-left: 10px;
}
.glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

Это создаст эффект вращения внутри кнопки. Вы можете настроить его самостоятельно.

person Midhun Jayan    schedule 23.03.2017
comment
Я также нашел следующий вопрос полезным. stackoverflow.com/questions/19364726/ - person ari; 23.03.2017