wie blinkknopf mit angularJs

Ich entwickle angularJs SPA Anwendung. Meine Front-End-HTML-Seite hat eine Schaltfläche beim Anklicken wartet auf den Vorgang abgeschlossen werden. Ich möchte, dass der Benutzer benachrichtigt, dass der Vorgang ausgeführt wird. Bis der Vorgang abgeschlossen ist, denke ich daran, die Schaltfläche oder den Text auf der Schaltfläche oder einen anderen Ansatz, den die Leute für das gegebene Szenario verwenden, zu blinken. Ich bin offen für Vorschläge wie Spinner auf der Schaltfläche oder alles, das den Benutzer den richtigen Zustand vermittelt.wie blinkknopf mit angularJs

Quelle

2017-03-23 ari

Wird diese Schaltfläche nur einmal verarbeitet oder kann sie wiederholt verarbeitet werden, indem nacheinander auf eine Seite ohne Aktualisierung geklickt wird? 1. einmal ausführen, ich denke, es ist sinnvoll, die Schaltfläche mit einem Lade-Label zu ersetzen, um anzuzeigen, es ist einmal zu übermitteln. 2. mehrere Male ausführen, können Sie die Schaltfläche während des Fortschritts deaktivieren und einige laden Symbol und aktivieren Sie die Schaltfläche, sobald es die Verarbeitung abgeschlossen ist. – YoungLearnsToCoding

Ab sofort ist es ein Klick oder ein einzelnes Submit-Ereignis. Ich bin ok mit Option1 sowie mit Option 2. 1) Schaltfläche ist beim Laden des Formulars aktiviert, 2) Benutzer klickt auf die Schaltfläche, um den Vorgang zu starten 3) müssen Benutzer aus der Website-Operation übermitteln ist 4) Vorgang abgeschlossen, die Schaltfläche ist behindert. Wie erreiche ich das obige mit angularJs? – ari

$ scope.formState = 1/2/3/4 wie beschrieben, ng-disabled = "formState> 1", ng-show = "formState> 1 && formState" // zeige loading – YoungLearnsToCoding

Sie können dies durch eine Boolesche Variable erreichen.

Für zB:

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

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

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

Nach der Operation abgeschlossen ist die Variable auf false.

in html

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

einige Arten

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); 
    } 
}

Hinzufügen Es wird eine Spinneffekt innerhalb der Schaltfläche erstellen. Sie können es selbst anpassen.

Quelle

2017-03-23 05:42:24

Ich fand auch die folgende Frage nützlich. http://stackoverflow.com/questions/19364726/issue-making-bootstrap3-icon-spin – ari

wie blinkknopf mit angularJs

Antwort

Verwandte Themen