使用Angularjs保存时更改按钮上的文本答案

【问题标题】：changing text on button while saving using Angularjs使用Angularjs保存时更改按钮上的文本
【发布时间】：2018-12-12 16:19:10
【问题描述】：

如何在表单中保存数据时更改提交按钮上的文本？

我有一个这样的按钮

<button ng-click="save()">Save data</button>

我根据以下答案更新了我的保存功能：

    $scope.ButtonText = "Save day";
    $scope.save=function(){
        $scope.ButtonText = "Saving day";
        for(var i=0;i<days.length;i++)
        {
           MyService.saveday()
            .success(function(data, status, headers, config) {
            })
            .error(function(data, status, headers, config) {
            });
        }
       $scope.ButtonText = "Save day";
    };

保存数据时，我想将文本从“保存数据”更改为“保存数据”，并在保存数据后改回“保存数据”。

更新

我加了

 $scope.ButtonText = "Save day";

根据下面的答案，但意识到我的需求更复杂，因为我多次调用异步服务。所以我想问题是如何在异步调用服务时设置文本，并且只将其恢复为原始文本，毕竟对服务的调用已经完成执行。

谢谢

托马斯

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

可以在作用域中暴露按钮文本，然后在保存的同时更新作用域值：

<button ng-click="save()">{{button}}</button>

在你的功能中：

$scope.button = "Save data";

$scope.save=function(){
    $scope.button = "Saving day";
    for(var i=0;i<days.length;i++)
    {
       MyService.saveday()
        .success(function(data, status, headers, config) {
        })
        .error(function(data, status, headers, config) {
        }).then(function() {
            if (i===days.length) { // is the last iteration
                $scope.button = "Save day";
            }
        });
    }

};

【讨论】：

谢谢。它奏效了，但我意识到我的需求有点复杂。我已更新问题以反映这一点
我更新了我的答案，使用了 then 的承诺（假设您的服务是 http 服务别名），在最后一次迭代中，$scope.ButtonText 更新为原始的“保存日”。跨度>

【解决方案2】：

至少有几种方法。

其中一种方法是在作用域上创建另一个属性，该属性将保存按钮的文本。

$scope.buttonText = 'Save';
$scope.save = function() {
    $scope.buttonText = 'Saving...';
};

然后将其绑定到新的范围属性，而不是在 HTML 中硬编码按钮文本。

<button ng-click="save()">{{buttonText}}</button>

【讨论】：

谢谢。它奏效了，但我意识到我的需求有点复杂。我已更新问题以反映这一点