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

Question

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

我有一个像这样的按钮

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

保存数据时,我想在保存数据时将文本从"保存数据"更改为"保存数据"并返回"保存数据".

UPDATE

我补充道

 $scope.ButtonText = "Save day"; 

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

谢谢

托马斯

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

};

Answer 2

至少有几种方法.

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

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

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

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