如何在AngularJS中加载内容时添加微调器？ [英] How to add a spinner while loading the content in AngularJS?

问题描述

我在加载内容时使用按钮微调器，当用户点击搜索按钮时会加载内容，此时 buttonLabel 将更改为搜索 并显示微调器（此处按钮将被禁用）。加载内容后（Promise已解决） buttonLabel 将恢复为搜索（此处将启用按钮）。

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). After loading the content (Promise resolved) buttonLabel will be reverted back to "Search" (button will be enable here).

我已尝试过以下代码，但它始终显示微调器。

I have tried the below code, but it is always showing the spinner.

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

更新小提琴： 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>

您需要做的就是使用 ng-show 或 ng-hide 指令。

All you need to do is use ng-show or ng-hide directives.

ng-show =expressio n

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

此范围仅在 searchButtonText 时可见将等于字符串'Searching'。

this span will only be visible when searchButtonText will be equal to a string 'Searching'.

您应该了解有关angular的指令的更多信息。它们将来会很有用。

You should learn more about angular's directives. They'll be useful in future.

祝你好运。

演示 http://jsfiddle.net/xc6nx235/16/

这篇关于如何在AngularJS中加载内容时添加微调器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！