Taste ändern, wenn der Benutzer Form

Question

einreichen Ich habe diese 2-Taste, die sparen und sparen, ist ...

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

Was ich will, ist, dass, bevor Benutzer klicken Sie das Formular abzuschicken, Taste bleiben, wie ‚Speichern‘ und nach Benutzer klicken auf die Schaltfläche Speichern, es wird für 2 Sekunden in die Schaltfläche "Speichern ..." geändert. Ich habe versucht und geplant, $ Timeout zu verwenden, aber es stellt sich heraus, dass das ganze Formular um 2 Sekunden verzögert wurde.

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

wie soll ich das machen?

Answer 1

Um ehrlich zu sein, ich habe es nicht getestet, aber so etwas wie das funktionieren sollte

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

Fühlen Sie sich frei zu äußern, wenn es nicht der Fall ist.

Answer 2

Ng-Switch ist nicht notwendig.

Ich würde dies tun:

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

Ich muss die Sache mit Ladesymbol speichern tun. Button sollte beim Bearbeiten speichern. Sie können dies auch mithilfe einer Variablen tun.

Zum Beispiel;

Vor-Knopf klicken,

$scope.loading = false; 

auf Knopf klicken

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