根据已选择的值过滤下一个下拉值

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-repeat 添加一个过滤器以避免所有已添加的对象：

$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-options 替换 ng-repeat 指令。