[英]How to add a spinner while loading the content in AngularJS?
I am using button spinner while loading the content, when the user clicks on the "Search" button content will load, at this time buttonLabel
will be changed to "Searching" and spinner will be shown (Here button will be disabled). 我在加载内容时使用按钮微调器,当用户点击“搜索”按钮时内容将加载,此时
buttonLabel
将更改为“搜索”并将显示微调器(此处按钮将被禁用)。 After loading the content (Promise resolved) buttonLabel
will be reverted back to "Search" (button will be enable here). 加载内容后(Promise已解决)
buttonLabel
将恢复为“搜索”(此处将启用按钮)。
I have tried the below code, but it is always showing the spinner. 我尝试了下面的代码,但它始终显示微调器。
HTML : 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";
}
}
}
Updated Fiddle : http://jsfiddle.net/xc6nx235/18/ 更新小提琴: http : //jsfiddle.net/xc6nx235/18/
<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>
All you need to do is use ng-show
or ng-hide
directives. 您需要做的就是使用
ng-show
或ng-hide
指令。
ng-show="expression" NG-节目= “表达”
<span ng-show="searchButtonText == 'Searching'">
<i class="glyphicon glyphicon-refresh spinning"></i>
</span>
this span will only be visible when searchButtonText
will be equal to a string 'Searching'. 只有当
searchButtonText
等于字符串'Searching'时, searchButtonText
显示此范围。
You should learn more about angular's directives. 您应该了解有关angular指令的更多信息。 They'll be useful in future.
它们将来会很有用。
Good luck. 祝好运。
Demo http://jsfiddle.net/xc6nx235/16/ 演示http://jsfiddle.net/xc6nx235/16/
Use ng-show
to show (or not) the loader ng-show="test"
: 使用
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, $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>
You can also use this simple directive: 您也可以使用这个简单的指令:
https://rawgit.com/jvdvleuten/angular-button-spinner/master/demo.html https://rawgit.com/jvdvleuten/angular-button-spinner/master/demo.html
To use it, just add the button-spinner='loading'
attribute: 要使用它,只需添加
button-spinner='loading'
属性:
<button class="btn btn-success" ng-click="show()" button-spinner="loading">Load</button>
It will append a spinner to it, inside the button, when your loading
variable in the scope is true. 当范围内的
loading
变量为true时,它会在按钮内附加一个微调器。
Just add an ng-show
to your spinner: 只需在您的微调器中添加一个
ng-show
:
<span ng-show="loading"><i class="glyphicon glyphicon-refresh spinning"></i></span>
and 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
}
});
Then, when you get your response, set $scope.loading
to false
again 然后,当您收到响应时,再次将
$scope.loading
设置为false
Use ng-show
directive like this ng-show="test"
on spinner span: 在微调器跨度上使用像
ng-show="test"
这样的ng-show
指令:
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>
You should use ng-class
to add/remove the class .spinning
based on $scope.test
. 你应该用
ng-class
添加/删除类.spinning
基于$scope.test
。 I have updated your fiddle here: http://jsfiddle.net/xc6nx235/15/ 我在这里更新了你的小提琴: http : //jsfiddle.net/xc6nx235/15/
For Angular2/4 , you can use [hidden] to control the visibility of the spinner. 对于Angular2 / 4 ,您可以使用[hidden]来控制微调器的可见性。 Here is a Plunker .
这是一个Plunker 。
<button class="btn btn-primary" (click)="onClickDoSomething()">
<span [hidden]="!spin">
<i class="glyphicon glyphicon-refresh spinning"></i>
</span> Do something
</button>
Where spinning is defined in as: 纺纱的定义如下:
<style>
.spinning {
animation: spin 1s infinite linear;
}
@keyframes spin {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
</style>
And your component simply sets the boolean to control the visibility of the spinner. 您的组件只需设置布尔值即可控制微调器的可见性。 In this example, we simply spin for 10 seconds.
在这个例子中,我们只旋转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;
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.