angularjs - angularjs ng-repeat form 仅禁用每个表单输入

Question

我有一个ng-repeat表格。当提交表单时，我想禁用提交表单输入。

我面临的问题是提交表格时。它禁用所有表单输入，并且永远不会重新启用。

请看看这个小提琴。

或下面的代码段。谢谢

在 JS 中

$scope.newDatas = {

  a1: 'a',
  a2: 'b'

}

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

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

Answer 1

您需要调用 $scope.$digest() 以允许从角度捕捉更改。

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

或者更好地使用 $timeout 自动执行它：

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

Answer 2

它只会禁用提交表单。试试这个：

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

在控制器中：

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

查看工作演示

Answer 3

setTimeout函数在 Angular “范围”之外执行，因此 Angular 不知道您isDisabled再次设置为 false。

使用 $timeout 服务，因为它会将您的函数包装在内部$scope.$apply并触发更新绑定的 $digest 循环。