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

Question

Imagine this:

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

My current code:

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','');
}

When i type "Car" inside first input (T1) and then type some text to input (N1) i want angular to check each T# input if has same value as (T1). If has disable (or readonly) all N# inputs related to currently checked T# input.

Afterwards when i remove duplicated values from T# fields, related T# fields should be returned to default input states (remove disable / readonly)

This should work by adding new dynamic inputs as seen in fiddle.

Answer 1

You should create a method, that will do the checking part. This method will should be bound to blur or change event on T# inputs, depends on what you want.

The method will check for duplicity, and if found, mark the object, eg add new property disabled: true . This property will be then used in the template on N# fields via ng-disabled directive.

Here is your update fiddle: http://jsfiddle.net/wcuuj8do/10/

Note the new method $scope.checkDuplicity and new binding:

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