在AngularJS中加载内容时如何添加微调器？

Question

我在加载内容时使用按钮微调器，当用户单击“搜索”按钮时，将加载内容，这时buttonLabel将更改为“搜索”，并且将显示微调器（此处按钮将被禁用）。加载后（已解决承诺），内容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";
      }
    }
  }

更新的小提琴： http :
//jsfiddle.net/xc6nx235/18/

Answer 1

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