Question

从下面的代码中，我想显示加载微调器或任何动画gif，直到点击myMessage上的Submit按钮时显示timeout。我怎么能这样做，请提前通知我并提前致谢！

HTML：

<div ng-controller="Controller">
  <input type="text" id="inputId" ng-model="enteredMessage" 
autofocus/>
  <i class="fa fa-spinner fa-spin" style="font-size:24px"></i>
  <button type="button"  ng-click="myFunction(enteredMessage)">Submit</button>
  Entered: {{myMessage}}
</div>

JS：

var myApp = angular.module('myApp',[]);
  myApp.controller('Controller',['$scope','$timeout', function ($scope, $timeout) {
    $scope.myFunction = function(enteredTextMessage){
      $timeout(function() {
        //I need to show the spinner for three seconds until my myMessage loading/displaying complete 
        $scope.myMessage = enteredTextMessage;
      }, 3000);
    }
  }
]);

Fiddle

Answer 1

这是有效的代码。您只需在字体真棒图标上添加ng-show或ng-hide，然后调用相应的更改值。

<强> HTML

<div ng-app='app' ng-controller='mainCtrl'>
<input type="text" id="inputId" ng-model="enteredMessage" 
autofocus/>
  <i class="fa fa-spinner fa-spin" style="font-size:24px" ng-show='showSpinner'></i>
  <button type="button"  ng-click="myFunction(enteredMessage)">Submit</button>
  Entered: {{myMessage}}
</div>

<强>控制器

angular.module('app',[]).controller('mainCtrl', function($scope, $timeout){
    $scope.showSpinner = false;
    $scope.myFunction = function(enteredTextMessage){
      $timeout(function() {
        //I need to show the spinner for three seconds until my myMessage loading/displaying complete 
        $scope.showSpinner = false;
        $scope.myMessage = enteredTextMessage;
      }, 3000);
      $scope.showSpinner = true;
    }
})

以下是JSFIDDLE用于演示的链接，因为stackoverflow的代码段不支持css链接到字体真棒。

如何在按钮点击时显示微调器或动画gif，直到显示消息？

1 个答案: