过滤基于已经选择的值的下一个下拉值

Question

我有一个带有四个选项的下拉列表。我选择第一个选项为" John（1）"，然后添加一行。现在，下一个下拉列表只能在下拉列表中向我显示三个选项，它应该排除先前下拉列表选定值的值，即" John（1）"。在下一个添加行中，它应排除前两个选定的下拉值。这可以实现吗？先感谢您。以下是小提琴。

<div ng-app ng-controller="LoginController">
    <table class="table table-striped">
    <thead>
        <tr>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="mapping in viewTemplateRow">
            <td>
                <select class="form-dropdown" id="templateId" ng-model="mapping.id">
                    <option value="">Please Select...</option>
                    <option ng-repeat="option in viewTemplateData" value="{{option.id}}" ng-selected="{{option.id == mapping.id}}" ng-model="viewTemplateData">{{option.name}} ( {{option.id}} )</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>
<button type="button" class="button button-compact" ng-click="addRow();">Add New Row</button>
</div>

https://jsfiddle.net/lt7ap/3787/

Answer 1

为ng重复添加过滤器，以避免已准备就绪的添加对象：

$scope.notSelected = function(item){
        for (var i in $scope.viewTemplateRow){
            if ($scope.viewTemplateRow[i].id==item.id)
            return false
      }
      return true;
    }

您的HTML看起来像这样：

<option ng-repeat="option in viewTemplateData | filter: notSelected" value="{{option.id}}" ng-selected="{{option.id == mapping.id}}" ng-model="viewTemplateData">{{option.name}} ( {{option.id}} )</option>

注意：考虑为选择器项目的NG选项替换NG-Repeat指令。