webentwicklung-frage-antwort-db.com.de

Wie füge ich einen Spinner hinzu, während der Inhalt in AngularJS geladen wird?

Ich verwende Button-Spinner, während der Inhalt geladen wird. Wenn der Benutzer auf die Schaltfläche "Suchen" klickt, wird der Inhalt geladen. Zu diesem Zeitpunkt wird buttonLabel in "Searching" geändert und der Spinner wird angezeigt (Hier ist die Schaltfläche deaktiviert). Nach dem Laden des Inhalts (Promise gelöst) wird buttonLabel wieder auf "Suchen" gesetzt (Schaltfläche wird hier aktiviert).

Ich habe den folgenden Code ausprobiert, aber er 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>

Skript :

$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/

10
NNR
<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>

Sie müssen lediglich ng-show- oder ng-hide-Direktiven verwenden.

ng-show = "Ausdruck"

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

diese Spanne ist nur sichtbar, wenn searchButtonText der Zeichenfolge 'Searching' entspricht.

Sie sollten mehr über die Richtungsrichtlinien erfahren. Sie werden in Zukunft nützlich sein.

Viel Glück.

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

12
Jagdeep Singh

Verwenden Sie ng-show, um den Lader ng-show="test" anzuzeigen (oder nicht):

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>

5
Thom-x

Sie können auch diese einfache Anweisung verwenden:

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

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

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

Es wird ein Drehfeld innerhalb der Schaltfläche angehängt, wenn Ihre Variable loading im Gültigkeitsbereich wahr ist.

Verwenden Sie die ng-show-Direktive wie folgt ng-show="test" in der Spinner-Spanne:

Ausschnitt: 

// 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>

1
A.J

Fügen Sie einfach einen ng-show zu Ihrem Spinner hinzu:

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

Wenn Sie dann Ihre Antwort erhalten, setzen Sie $scope.loading erneut auf false

Demo

1
Razvan Balosin

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/

0
Lucian

Bei Angular2/4 können Sie mit [hidden] die Sichtbarkeit des Spinners 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>

Wobei Spinnen definiert ist 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 legt einfach den Boolean-Wert fest, um die Sichtbarkeit des Spinners zu steuern. In diesem Beispiel drehen wir uns einfach für 10 Sekunden.

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