angularjs ng-repeat form only disable each form input

Question

I have a ng-repeat forms. When the form on submitting, I want disable the submitting form inputs.

My facing problem is when I submit form. It disable all the forms input and never back to enable.

Please check out this fiddle.

or snippet code below. Thanks

In JS

$scope.newDatas = {

  a1: 'a',
  a2: 'b'

}

$scope.send = function() {
 $scope.isDisabled = true;
 setTimeout(function() {
  alert('done');
  $scope.isDisabled = false;
 },1000);
}

In HTML

<div ng-repeat="(key, value) in newDatas">
  <form name="newData">
    <input type="text" ng-model="value" ng-disabled="isDisabled">
    {{value}}
    <button ng-click="send()" ng-disabled="isDisabled">submit</button>
  </form>
</div>

score 2 · Answer 1 · answered Oct 05 '13 at 09:16

2

You need to call $scope.$digest() in order to allow angular catch the changes.

 setTimeout(function() {
  alert('done');
  $scope.isDisabled = false;
  $scope.$digest();
},1000);

Or better use $timeout that does it automatically:

$timeout(function() {
  alert('done');
  $scope.isDisabled = false;
},1000);

answered Oct 05 '13 at 09:16

Yaroslav Pogrebnyak

1,117
9
22

How about disable only the submitting form ? – vzhen Oct 05 '13 at 09:42

score 1 · Accepted Answer · answered Oct 05 '13 at 10:09

It will disable only the submitting form. Try this:

In HTML:

<form name="newData">
    <input type="text" ng-model="value" ng-disabled="isDisabled[key]">
    {{value}}
    <button ng-click="send(key)" ng-disabled="isDisabled[key]">submit</button>
  </form>

In Controller:

   $scope.isDisabled = {};
   $scope.send = function(key) {
      $scope.isDisabled[key] = true;
      $timeout(function() {
        //   alert('done');
            $scope.isDisabled[key] = false;
      },1000);
    }

SEE WORKING DEMO

score 0 · Answer 3 · answered Oct 05 '13 at 09:15

setTimeout function is executed outside of Angular "scope", hence Angular is not aware that you've set isDisabled to false again.

Use $timeout service because it will wrap your function inside $scope.$apply and trigger the $digest cycle which updates the bindings.

angularjs ng-repeat form only disable each form input

3 Answers3