如何在按鈕上單擊顯示微調框或動畫gif，直至顯示消息？

Question

從下面的代碼中，我想要顯示加載微調框或任何動畫gif，直到myMessage應顯示在timeout上點擊Submit按鈕上。我該如何做到這一點，請讓我知道，並提前致謝！

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

這裏是計算器的代碼段是不支持的CSS鏈接到字體真棒鏈接JSFIDDLE示範。