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>

我想要的是，在用户点击提交表单之前，按钮保持为＆＃39;保存＆＃39;并且在用户点击该保存按钮后，它将更改为“保存...”＆＃39;按钮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

我必须使用加载图标进行保存。按钮应该说处理时保存。您也可以使用变量执行此操作。

例如;

按钮前点击

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

用户提交表单时按钮更改

3 个答案: