Question

我有一张表格<tr>在ng-repeat里面。其中一个表行用于Cancel按钮。当按下此取消按钮时，我想将该行中的取消按钮的文本更改为Canceling....，直到我的$http返回响应。

这可能吗？

这是我到目前为止所尝试的内容，但这会更改表格中所有按钮的文本，而不仅仅是单击的按钮。

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

以下是一个例子的小提琴：http://jsfiddle.net/gNYHt/3/

Answer 1

我更新了原来的小提琴：

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

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>

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

1 个答案: