在 Angular 中使用动态生成的字段禁用输入

【问题标题】：Disable input with dynamically generated fields in Angular在 Angular 中使用动态生成的字段禁用输入
【发布时间】：2017-10-27 23:52:10
【问题描述】：

想象一下：

http://jsfiddle.net/wcuuj8do/9/

我当前的代码：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.rowData = [];

    $scope.addRow = function(title, number)
    {
      $scope.rowData.push({
        'title': title,
        'number': number
      });
    };

    $scope.addRow('Car', '1200');
      $scope.addRow('Car','');
}

当我在第一个输入 (T1) 中键入“汽车”然后键入一些文本以输入 (N1) 时，我希望 angular 检查每个 T# 输入是否具有与 (T1) 相同的值。如果已禁用（或只读）与当前检查的 T# 输入相关的所有 N# 输入。

之后，当我从 T# 字段中删除重复值时，相关的 T# 字段应返回到默认输入状态（删除禁用/只读）

这应该通过添加新的动态输入来工作，如小提琴所示。

【问题讨论】：

你的意思是这个ng-disabled="!rowData[key].number"？

标签： javascript jquery html angularjs

【解决方案1】：

您应该创建一个方法，该方法将执行检查部分。此方法应绑定到 T# 输入上的 blur 或 change 事件，这取决于您想要什么。

该方法将检查重复性，如果找到，则标记对象，例如添加新属性disabled: true。然后，该属性将通过ng-disabled 指令在N# 字段的模板中使用。

这是你的更新小提琴：http://jsfiddle.net/wcuuj8do/10/

注意新方法$scope.checkDuplicity和新绑定：

<tr ng-repeat="(key, item) in rowData">
  <td>T{{ ($index+1) }}: <input type="text" ng-model="rowData[key].title" ng-change="checkDuplicity(key)" value="" style='margin-bottom:15px' /></td>
  <td>N{{ ($index+1) }}: <input type="text" ng-model="rowData[key].number" value="" style='margin-bottom:15px' ng-disabled="rowData[key].disabled" /></td>
</tr>

【讨论】：