web-dev-qa-db-ja.com

AngularJSにコンテンツをロードするときにスピナーを追加する方法は？

コンテンツの読み込み中にボタンスピナーを使用しています。ユーザーが[検索]ボタンをクリックすると、コンテンツが読み込まれ、この時点でbuttonLabelが[検索中]に変更され、スピナーが表示されます（ここでボタン無効）。コンテンツを読み込んだ（Promiseが解決された）buttonLabelは「検索」に戻ります（ここでボタンが有効になります）。

以下のコードを試しましたが、常にスピナーを表示しています。

HTML：

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

スクリプト：

$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";
      }
    }
  }

更新Fiddle：http://jsfiddle.net/xc6nx235/18/

javascriptangularjstwitter-bootstrap
11
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>

必要なのは、ng-showまたはng-hideディレクティブ。

ng-show = "expression"

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

このスパンは、searchButtonTextが文字列「Searching」と等しい場合にのみ表示されます。

Angularのディレクティブについて詳しく学ぶ必要があります。それらは将来役に立つでしょう。

がんばろう。

デモ http://jsfiddle.net/xc6nx235/16/

13
Jagdeep Singh

つかいます ng-showローダーを表示する（または表示しない）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>
7
Thom-x

この単純なディレクティブも使用できます。

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

使用するには、button-spinner='loading'属性：

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

スコープ内のloading変数がtrueの場合、ボタン内にスピナーを追加します。

4
jvdveuten

つかいます ng-showこのようなディレクティブng-show="test"スピナースパン：

スニペット：

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

スピナーにng-showを追加するだけです：

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

およびコントローラー：

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

次に、応答を取得したら、$scope.loadingをfalseに再度設定します

デモ

1
Razvan B.

ng-classに基づいてクラス.spinningを追加/削除するには、$scope.testを使用する必要があります。ここでフィドルを更新しました： http://jsfiddle.net/xc6nx235/15/

0
Lucian

Angular2/4の場合、[非表示]を使用してスピナーの可視性を制御できます。ここにPlunkerがあります。

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

紡績は次のように定義されています：

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

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

また、コンポーネントはブール値を設定して、スピナーの可視性を制御するだけです。この例では、単純に10秒間スピンします。

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