AngularJS: Hinzufügen einer Schaltfläche Spinner beim Laden des Inhalts

Question

Ich verwende Button Spinner beim Laden des Inhalts, wenn der Benutzer auf den "Search" Button Inhalt lädt, zu diesem Zeitpunkt ButtonLabel wird zu "Suchen" und Spinner geändert werden wird angezeigt (Hier wird die Schaltfläche deaktiviert). Nach dem Laden des Contents (Promise aufgelöst) wird ButtonLable wieder auf "Search" zurückgesetzt (Button wird hier aktiviert). Ich habe den folgenden Code versucht, aber es zeigt immer den Spinner.

HTML:

<button class="btn btn-xs btn btn-blue" ng-click="show()"> 
    <span><i class="glyphicon glyphicon-off"></i></span> {{buttonLabel}} 
</button> 

Script:

$scope.buttonLabel = "Search"; 
$scope.show = function() { 
    $scope.buttonLabel = "Searching"; 
    $scope.test = TestService.getList($cookieStore.get('url'), 
    $rootScope.resourceName+"/students"); 
    $scope.test.then(function(data) { 
     if(data.list) { 
     $scope.testData = data.list; 
     $scope.buttonLabel = "Search"; 
     } 
    } 
    } 

Aktualisiert Fiddle:http://jsfiddle.net/xc6nx235/18/

Answer 1

<div ng-app="formDemo" ng-controller="LocationFormCtrl"> 
<div> 
    <button type="submit" class="btn btn-primary" ng-click="search()"> 
     <span ng-show="searchButtonText == 'Searching'"><i class="glyphicon glyphicon-refresh spinning"></i></span> 
     {{ searchButtonText }} 
    </button> 
</div> 

Alles, was Sie tun müssen, ist ng-show oder ng-hide Richtlinien zu verwenden.

ng-show = "Expression"

<span ng-show="searchButtonText == 'Searching'"> 
    <i class="glyphicon glyphicon-refresh spinning"></i> 
</span> 

Diese Spanne ist nur sichtbar, wenn searchButtonText in eine Zeichenfolge gleich sein 'Suche'.

Sie sollten mehr über die Anweisungen von angular erfahren.Sie werden in Zukunft nützlich sein.

Viel Glück.

Demo http://jsfiddle.net/xc6nx235/16/

Answer 2

einfach eine ng-show zu Ihrer Spinner hinzufügen:

<span ng-show="loading"><i class="glyphicon glyphicon-refresh spinning"></i></span> 

und Controller:

.controller("LocationFormCtrl", function ($scope) { 
    $scope.searchButtonText = "Search"; 
    $scope.loading = false; 
    $scope.test="false"; 
    $scope.search = function() { 
     $scope.test="true"; 
     $scope.loading="true" 
     $scope.searchButtonText = "Searching"; 
     // Do your searching here 
    } 
}); 

Dann, wenn Sie Ihre Antwort erhalten, setzen Sie $scope.loading-false wieder

Demo

Answer 3

Verwenden ng-show Richtlinie wie diese ng-show="test" auf Spinner Spannweite:

Snippet:

// http://icelab.com.au/articles/levelling-up-with-angularjs-building-a-reusable-click-to-edit-directive/ 
 

 
angular.module("formDemo", []) 
 

 
.controller("LocationFormCtrl", function($scope) { 
 
    $scope.searchButtonText = "Search"; 
 
    $scope.test = "false"; 
 
    $scope.search = function() { 
 
    $scope.test = "true"; 
 
    $scope.searchButtonText = "Searching"; 
 
    // Do your searching here 
 
    } 
 
});

</style> <!-- Ugly Hack due to jsFiddle issue:http://goo.gl/BUfGZ --> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="https://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script> <style> body { 
 
    font-family: "HelveticNeue", sans-serif; 
 
    font-size: 14px; 
 
    padding: 20px; 
 
} 
 
h2 { 
 
    color: #999; 
 
    margin-top: 0; 
 
} 
 
.field { 
 
    margin-bottom: 1em; 
 
} 
 
.click-to-edit { 
 
    display: inline-block; 
 
} 
 
input { 
 
    display: initial !important; 
 
    width: auto !important; 
 
    margin: 0 5px 0 0 !important; 
 
} 
 
.glyphicon.spinning { 
 
    animation: spin 1s infinite linear; 
 
    -webkit-animation: spin2 1s infinite linear; 
 
} 
 
@keyframes spin { 
 
    from { 
 
    transform: scale(1) rotate(0deg); 
 
    } 
 
    to { 
 
    transform: scale(1) rotate(360deg); 
 
    } 
 
} 
 
@-webkit-keyframes spin2 { 
 
    from { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="formDemo" ng-controller="LocationFormCtrl"> 
 
    <div> 
 
    <button type="submit" class="btn btn-primary" ng-click="search()"> 
 
     <span ng-show="test"><i class="glyphicon glyphicon-refresh spinning"></i></span> 
 
     {{ searchButtonText }} 
 
    </button> 
 
    </div> 
 
</div>

Answer 4

Verwenden ng-show zu zeigen (oder nicht) den Lader ng-show="test":

JSFiddle

// http://icelab.com.au/articles/levelling-up-with-angularjs-building-a-reusable-click-to-edit-directive/ 
 

 
angular.module("formDemo", []) 
 

 
.controller("LocationFormCtrl", function ($scope, $timeout) { 
 
    $scope.searchButtonText = "Search"; 
 
$scope.test="false"; 
 
$scope.search = function() { 
 
    $scope.test="true"; 
 
    $scope.searchButtonText = "Searching"; 
 
    $timeout(function(){ 
 
     $scope.test="false"; 
 
     $scope.searchButtonText = "Search"; 
 
    },1000) 
 
    // Do your searching here 
 
} 
 
});

body { 
 
    font-family:"HelveticNeue", sans-serif; 
 
    font-size: 14px; 
 
    padding: 20px; 
 
} 
 
h2 { 
 
    color: #999; 
 
    margin-top: 0; 
 
} 
 
.field { 
 
    margin-bottom: 1em; 
 
} 
 
.click-to-edit { 
 
    display: inline-block; 
 
} 
 
input { 
 
    display: initial !important; 
 
    width: auto !important; 
 
    margin: 0 5px 0 0 !important; 
 
} 
 

 
.glyphicon.spinning { 
 
    animation: spin 1s infinite linear; 
 
    -webkit-animation: spin2 1s infinite linear; 
 
} 
 

 
@keyframes spin { 
 
    from { transform: scale(1) rotate(0deg);} 
 
    to { transform: scale(1) rotate(360deg);} 
 
} 
 

 
@-webkit-keyframes spin2 { 
 
    from { -webkit-transform: rotate(0deg);} 
 
    to { -webkit-transform: rotate(360deg);} 
 
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 
<script src="https://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script> 
 
    
 
<div ng-app="formDemo" ng-controller="LocationFormCtrl"> 
 
    <div> 
 
    <button type="submit" class="btn btn-primary" ng-click="search()"> 
 
     <span ng-show="test" ><i class="glyphicon glyphicon-refresh spinning"></i></span> 
 
     {{ searchButtonText }} 
 
    </button> 
 
</div>  
 
</div>

Answer 5

Sie sollten ng-class verwenden, um die Klasse .spinning basierend auf $scope.test hinzuzufügen/zu entfernen. Ich habe Ihre Geige hier aktualisiert: http://jsfiddle.net/xc6nx235/15/

Answer 6

Sie können auch diese einfache Richtlinie verwenden:

https://rawgit.com/jvdvleuten/angular-button-spinner/master/demo.html

es zu verwenden, fügen Sie einfach die button-spinner='loading' Attribut:

<button class="btn btn-success" ng-click="show()" button-spinner="loading">Load</button> 

Es wird ein Spinner anhängen es, innerhalb der Taste, wenn Ihre Variable im Bereich wahr ist.

Answer 7

Für Angular2/4 können Sie [verborgen] verwenden, um die Sichtbarkeit des Spinner zu steuern. Hier ist ein Plunker.

<button class="btn btn-primary" (click)="onClickDoSomething()"> 
    <span [hidden]="!spin"> 
     <i class="glyphicon glyphicon-refresh spinning"></i> 
    </span> Do something 
</button> 

Wo Spinnen in definiert sind als:

<style> 
    .spinning { 
    animation: spin 1s infinite linear; 
    } 

    @keyframes spin { 
    from { 
     transform: scale(1) rotate(0deg); 
    } 
    to { 
     transform: scale(1) rotate(360deg); 
    } 
    } 
</style> 

Und Ihre Komponente setzt einfach den boolean die Sichtbarkeit des Spinners zu steuern. In diesem Beispiel drehen wir einfach 10 Sekunden lang.

import {Component} from 'angular2/core'; 
import {Observable} from 'rxjs/Rx'; 

@Component({ 
    selector: 'do-something', 
    templateUrl: 'src/dosomething.html' 
}) 
export class DoSomething { 
    private spin: boolean = false; 

    onClickDoSomething() { 
    this.spin = true; 
    this.sub = Observable.interval(10000).subscribe(x => { 
     this.sub.unsubscribe(); 
     this.spin = false; 
    }); 
    } 
}