问题描述
我在加载内容时使用按钮微调器，当用户点击“搜索”按钮时内容将加载，此时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";
}
}
}
更新小提琴： ：
1楼
Jagdeep Singh
13
已采纳
2015-07-31 09:14:56
<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-节目= “表达”
<span ng-show="searchButtonText == 'Searching'">
<i class="glyphicon glyphicon-refresh spinning"></i>
</span>
只有当searchButtonText等于字符串'Searching'时， searchButtonText显示此范围。
您应该了解有关angular指令的更多信息。 它们将来会很有用。
祝好运。
演示
2楼
Thom-x
7
2015-07-31 09:05:20
使用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>
3楼
jvdveuten
4
2015-12-16 12:50:24
您也可以使用这个简单的指令：
要使用它，只需添加button-spinner='loading'属性：
<button class="btn btn-success" ng-click="show()" button-spinner="loading">Load</button>
当范围内的loading变量为true时，它会在按钮内附加一个微调器。
4楼
Razvan B.
1
2015-07-31 09:03:01
只需在您的微调器中添加一个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
5楼
A.J
1
2015-07-31 09:04:04
在微调器跨度上使用像ng-show="test"这样的ng-show指令：
片段：
// 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>
6楼
Lucian
0
2015-07-31 09:06:27
你应该用ng-class添加/删除类.spinning基于$scope.test 。
我在这里更新了你的小提琴： ：
7楼
rouble
0
2017-09-28 13:35:04
对于Angular2 / 4 ，您可以使用[hidden]来控制微调器的可见性。 这是一个 。
<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;
});
}
}