htmlangularjsangularjs-ng-repeatangularjs-ng-disabled

Disabling the Button for only a specific instance of ng-repeat

I have ng-repeat on a div that contains a button. Say the div repeats 5 times with 5 buttons. I want to disable the 2nd button when it is clicked. How can I disable the button at that index?

<div ng-repeat='thing in things'> <button ng-click='clickToDisable($index)'>button</button> </div>

Something like this. I tried ng-disabled= 'disableButton == $index but that just disables all of the buttons.

Solution

  • You can pass in the $event into the click function and set the disabled attribute to true, like this:

    <div ng-repeat='thing in things'>
  <button ng-click='clickToDisable($event)'>button</button>
</div>

    And in the controller:

    $scope.clickToDisable = function(evt) {
    evt.currentTarget.setAttribute('disabled', 'true');
}

    Here is a fiddle of it working.