изменение кнопки, когда пользователь отправить форму

Question

У меня есть эта 2 кнопки, которая сохранения и сохранения ...

<div ng-switch on="isLoading"> 
<div ng-switch-when="true"> 
    <button type="button" class="btn btn-primary btn-block disabled">Saving ...</button> 
</div> 

<div ng-switch-when="false"> 
    <button type="submit" class="btn btn-primary btn-block" ng-disabled="!allowSubmit(addUser)" ng-click="add();">Save</button> 
</div> 
</div> 

Что я хочу, что перед пользователем нажмите, чтобы отправить форму, кнопка остается как «сохранить» и после того, как нажмите кнопку «Сохранить», и она изменится на «сохранение ...» в течение 2 секунд. Я пробовал и планировал использовать $ timeout, но получается, что вся форма задерживается на 2 секунды.

$dialogScope.add = function() { 
       if ($dialogScope.user.password != $dialogScope.user.confirmpassword && $dialogScope.user.username) { 
        $dialogScope.hasError = true 
        $dialogScope.errorMessage = "Password does not match"; 
        return $dialogScope.errorMessage; 
       } 
       var copy = angular.copy($dialogScope.user); 
      } 
      $timeout(function() { 
       $dialogScope.hasError = false; 
       $scope.users.push(copy); 
       $dialogScope.closeThisDialog(); 
      }, 2000); 

Как я могу это сделать?

Answer 1

Честно говоря, я не проверял, но что-то подобное должно работать

$dialogScope.add = function() { 
    if ($dialogScope.user.password != $dialogScope.user.confirmpassword && 
     $dialogScope.user.username) 
    { 
     $dialogScope.hasError = true 
     $dialogScope.errorMessage = "Password does not match"; 
     return $dialogScope.errorMessage; 
    } 
    var copy = angular.copy($dialogScope.user); 

    $dialogScope.hasError = false; 
    $scope.users.push(copy); 
    $dialogScope.closeThisDialog(); 
    $scope.isLoading = true; 

    $timeout(function() { 
     $scope.isLoading = false; 
    }, 2000); 
} 

Не стесняйтесь комментировать, если это не так.

Answer 2

Ng-переключатель не требуется.

Я хотел бы сделать это:

HTML:

<div ng-switch-when="true"> 
    <button type="button" class="btn btn-primary btn-block disabled">{{btnText}}</button> 
</div> 

JS:

$dialogScope.btnText = 'save'; 
$dialogScope.add = function() { 
       if ($dialogScope.user.password != $dialogScope.user.confirmpassword && $dialogScope.user.username) { 
        $dialogScope.hasError = true 
        $dialogScope.errorMessage = "Password does not match"; 
        return $dialogScope.errorMessage; 
       } 
       var copy = angular.copy($dialogScope.user); 
       $dialogScope.btnText = 'saving...'; 
      } 
      $timeout(function() { 
       $dialogScope.hasError = false; 
       $scope.users.push(copy); 
       $dialogScope.closeThisDialog(); 
       $dialogScope.btnText = 'save'; 
      }, 2000); 

Answer 3

Я должен сделать сохранить вещь с загрузкой значка. Кнопка должна указывать сохранение при обработке. Вы также можете сделать это, используя переменную.

Для примера;

Перед Button Click

$scope.loading = false; 

Кнопка включения Нажмите

$scope.loading = true; 

HTML

<button type="submit" ng-disabled="myForm.$invalid">  
    <span data-ng-hide="loading"><i class="fa fa-save"></i>Save</span> 
    <span data-ng-show="loading"><i class="fa fa-refresh fa-spin"></i>Saving</span>  
</button>