在 Angular 中过滤下拉列表

Question

我需要一个可以在页面上多次复制的 select html 元素。这些选择元素的选项都来自一个主列表。所有的选择元素只能显示主列表中没有在任何其他选择元素中选择的所有项目，除非它们只是被复制。

当您从重复的选择元素中选择新项目时，即使模型仍然具有正确的一组，它似乎也会选择您选择的选项之后的选项。这似乎总是在 IE11 中发生，有时在 Chrome 中也会发生。

我意识到这听起来很复杂，所以我创建了一个jFiddle example。

试试这些步骤：

1. 选择折弯机
2. 点击重复链接
3. 选择 Fry（在重复的选择上）
4. 请注意，选择的是 Leela，但模型仍然选择 Fry (id:2)

谁能告诉我如何解决这个问题或我可能做错了什么？

这里是相关的 Angular 代码：

myapp.controller('Ctrl', function ($scope) {
    $scope.selectedIds = [{}];

    $scope.allIds = [{ name: 'Bender', value: 1},
                     {name: 'Fry', value: 2},
                     {name: 'Leela', value: 3 }];

    $scope.dupDropDown = function(currentDD) {
        var newDD = angular.copy(currentDD);
        $scope.selectedIds.push(newDD);
    }
});


angular.module('appFilters',[]).filter('ddlFilter', function () {
     return function (allIds, currentItem, selectedIds) {


         //console.log(currentItem);
         var listToReturn = allIds.filter(function (anIdFromMasterList) {
                if (currentItem.id == anIdFromMasterList.value)
                    return true;

                var areThereAny = selectedIds.some(function (aSelectedId) {
                    return  aSelectedId.id == anIdFromMasterList.value;
                });
                return !areThereAny;
            });
            return listToReturn;
        }
});

这里是相关的 HTML

<div ng-repeat="aSelection in selectedIds "> 
<a href="#" ng-click="dupDropDown(aSelection)">Duplicate</a>
<select ng-model="aSelection.id" ng-options="a.value as a.name for a in allIds | ddlFilter:aSelection:selectedIds">
<option value="">--Select--</option>
</select>
</div>

Answer 1

您好，我刚刚对您的 dupDropDown 函数进行了如下小改动

$scope.dupDropDown = function(currentDD) {

        $scope.selectedIds.push({});
    }

请检查这是否适合您。