带有限制的角度指令数据绑定

Question

我有数组数据进入指令，该指令用作填充多个Select元素的数据源。问题是我需要限制值的选择，这样它应该只在指令中的所有select元素中选择一次，它将传入的数组作为数据源共享。（即）如果[1,2,3,4] ，5,6]是指令的输入数组，用作指令内2个选择元素的数据源，如果我在第一个选择元素中选择1,2，则应禁用它（以某种方式限制）来选择来自第二个选择元素的相同值（即，应允许第二个选择元素仅从值3,4,5,6中选择）。

https://jsfiddle.net/u19efwn7/2/

module Api {
  export class App {
    static NewApp: ng.IModule = angular.module('NewApp', []).constant('_', window._)
      .run(function($rootScope) {
        $rootScope._ = window._;
      });
  }
}

module Api.Directive {
  function Grid(): ng.IDirective {
    return {
      replace: true,
      restrict: 'E',
      scope: {
        data: '=',
        waferdata: '=',
        editable: '='
      },
      template: '<table border="1" class="GridView">\
  <tr ng-repeat="row in data.Rows track by row.Id">\
    <td ng-repeat-start="cell in row.Columns track by cell.Id" ng-show="cell.Visible">{{cell.Name}}</td>\
    <td ng-repeat-end ng-show="cell.Visible">\
      <select multiple ng-multiple="true" ng-change="filterData(this,cell.Value)" ng-disabled="editable" ng-model="cell.Value" ng-options="value for value in waferdata"></select>\
    </td>\
  </tr>\
</table>';

      controller: ['$scope', '$element', '_', function($scope: ng.IScope, $element: ng.IRootElementService, _: _.LoDashStatic) {
        var localCopy = _.cloneDeep($scope.waferdata);
        $scope.filterData = function(element: HTMLSelectElement, selectedValue: Array < number > ): void {
          alert(this.cell.Value);
        }
      }]
    }
  }
  App.NewApp.directive('grid', Grid);
}
module Api.Controller {
  class TCell {
    Id: number;
    Name: string;
    Value: Array < number > ;
    Visible: boolean;
  }
  class TRow {
    Id: number;
    Columns: Array < TCell > ;
  }
  class Table {
    Rows: Array < TRow > = new Array < TRow > ();
  }
  export class GridController {
    private scope: ng.IScope;
    private RowCount: number;
    private ColumnCount: number;
    private TableJSON: Object;
    private data: Table = new Table();
    private waferdata: Array < number > = [1, 2, 3, 4, 5, 6];
    public static $inject = ["$scope"];
    constructor(private $scope ? : ng.IScope) {
      this.RowCount = 1;
      this.ColumnCount = 2;
    }

    DrawTable(): void {
      this.data = new Table();
      for (var i = 1; i <= this.RowCount; i++) {
        var tableRow = new TRow();
        tableRow.Id = i;
        var columns = new Array < TCell > ();
        for (var j = 1; j <= this.ColumnCount; j++) {
          var cell = new TCell();
          cell.Id = j;
          cell.Name = "column " + i + "," + j;
          cell.Visible = true;
          columns.push(cell);
        }
        tableRow.Columns = columns;
        this.data.Rows.push(tableRow);
      }
    }
  }
  App.NewApp.controller('GridController', Api.Controller.GridController);
}

<div ng-app="NewApp">
  <div ng-controller="GridController as ctrl">
    <table>
      <tr>
        <td>Rows:</td>
        <td>
          <input type="text" ng-model="ctrl.RowCount" />
        </td>
      </tr>
      <tr>
        <td>Columns:</td>
        <td>
          <input type="text" ng-model="ctrl.ColumnCount" />
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="button" ng-click="ctrl.DrawTable()" value="Draw Table" />
        </td>
      </tr>
    </table>
    {{ctrl.data}}
    <grid data="ctrl.data" waferdata="ctrl.waferdata" editable="false"></grid>
  </div>