CODEWITHSUNDEEP
javascriptangularjs
birdy
birdy

Reputation: 9636

How to update text of button inside ng-repeat for each row

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.

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/

Upvotes: 2

Views: 1138

Answers (1)

boindiil
boindiil

Reputation: 5865

I have updated the original fiddle:

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

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>

Upvotes: 3

Related Questions