如何更新每个行的ng-repeat中按钮的文本

I have a table where the <tr> is inside ng-repeat. One of the table rows is for a Cancel button. When this cancel button is pressed I would like to change the text for cancel button in that row to Canceling.... until my $http comes back with a response.

我有一个表，其中在ng-repeat中。其中一个表行是取消按钮。当这个取消按钮被按下我想改变取消按钮的文本行取消....直到我的$http返回响应。

Is this possible to do?

这可能吗?

Here is what I've tried so far but this changes the text of all buttons in the table rather than just the one that was clicked.

这是我迄今为止尝试过的，但这改变了表中所有按钮的文本，而不是仅仅是被单击的按钮。

$scope.cancelStarted = false;
$scope.cancelButtonText = "Cancel Button"
$scope.cancelButton = function (id) {
    $scope.cancelButtonText = "Canceling..."
    //perform $http
    $scope.cancelStarted = false;
}

HTML

<button ng-click='cancelButton(activity.id)' ng-hide="cancelStarted">{{cancelButtonText}}</button>

Here is a fiddle of an example: http://jsfiddle.net/gNYHt/3/

这里有一个例子:http://jsfiddle.net/gNYHt/3/

1 个解决方案

#1

I have updated the original fiddle:

我更新了原始的小提琴:

You could use the $index variable within the ng-repead to set a variable indicating the cancelling...

您可以在ng-repead中使用$index变量来设置一个表示取消的变量……

angular.module('MyModule', [])

.controller( 'MyController', function($scope, $timeout){
    
    $scope.activities = [
        { name: 'darts' },
        { name: 'pool' },
        { name: 'cricket' }
    ];
    
    $scope.cancel = function(index) {
        $scope.activities[index].cancelling = true;
            
        // do server communication

        $timeout(function() {
            $scope.activities[index].cancelling = false;
        }, 1000);
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='MyModule' ng-controller='MyController'>
    <div ng-repeat='activity in activities'>
        <span>{{activity.name}}</span>
        <button ng-click='cancel($index)' ng-disabled='activity.cancelling' >Cancel<span ng-if="activity.cancelling">ling...</span>
        </button>
    </div>
        
</div>

#1