使用角度禁用选择数组中的选项

Question

我有一个创建选择元素数组的 ng-repeat。 （选择允许配置数据表中的列：'name'、'address'、'phone'等）

两列不能使用相同的数据。

因此，如果为第一列选择了“名称”，则在所有其他列的选择中禁用名称。所以：

col1 options       col2  options   col3  options  etc.
-name             -name            -name
-address          -address         -address
-phone            -phone           -phone

变成

col1              col2  options   col3  options  etc.
-name SELECTED    -name DISABLED  -name DISABLED
                  -address        -address 
                  -phone          -phone

你明白了。

这是我目前为止的地方。我试图设置一个名为 unique 的测试，如果没有在其他任何地方选择该选项，它将返回 true，但我没有走远：

<div ng-repeat="column in m.data.Columns track by $index">
    <label for="ColumnTypeCode{{ $index }}" class="control-label">Column #{{ $index + 1 }} Code</label>
    <select 
            id="ColumnTypeCode{{ $index }}" 
            class="form-control" 
            ng-style="{'width': '100%'}" 
            name="ColumnTypeCode{{ $index }}"
            ng-model="column.ColumnCode" 
            required data-ng-change="SetColumnDefaults(column)"
            ng-options="x.ColumnCode as x.ColumnCode disable when !x.ColumnCode.unique for x in m.data.IncidentTypeColumns   | filter:{ ShowOnClaimsGrid: true } "
            unique_item_name="ColumnCode"
            ng-disabled="column.Mandatory"></select>
</div>

有没有一种方法可以让 Angular 的 2-way 绑定可以判断给定的选择是否在模型中，并在所有其他选择中禁用该选项？

只是在这里玩：

我可以在 x.ColumnCode.takenAlready 时设置 disable，然后将 takeAlready 设置为 true。我想我需要一个函数来做到这一点。

ng-change="setOptionTaken(x)";

$scope setOptionTaken = function(column) {
        column.takenAlready = column.ColumnCode.length;
    }
}

嗯。不，我需要一个可以迭代的 takeAlready 类型数组。

Answer 1

一种方法是在<select> 元素上添加一个ng-click 侦听器，该侦听器绑定到控制器中的一个函数，您可以使用它来检查与列ID 对应的选定值。有了这些知识（即知道选择了哪个标签以及它是哪一列），您可以手动禁用其他两个选择中的选项。

解释它，感觉有点笨拙，但我认为它会在紧要关头起作用。