Question

我有一个动态html块，用户可以为其添加多个选择列表。我想通过使用自定义过滤器来禁用用户在先前列表中所做的选择。我正在努力解决如何将动态模型传递到过滤器并检查已生成的选择列表中是否存在该值的问题。

我创建了一个plunker。我很感激帮助。

<body ng-app="app" ng-init="things=[{id:0,name:'thing1'},{id:1,name:'thing2'},{id:2,name:'thing3'},{id:3,name:'thing4'}]">
<select ng-model="fields.option1" ng-options="thing.name for thing in things | excludeFrom:fields.option2"></select>
<select ng-model="fields.option2" ng-options="thing.name for thing in things | excludeFrom:fields.option1"></select>
<select ng-model="fields.option2" ng-options="thing.name for thing in things | excludeFrom:fields.option1,fields.option2"></select>

angular.module('app',[])
.filter('excludeFrom', [function () {
return function (things, selectedValue) {
    if (!angular.isUndefined(things) && !angular.isUndefined(selectedValue)) { //&& selectedValue.length > 0) {
        var tempThings = [];
        angular.forEach(selectedValue, function (name) {
            angular.forEach(things, function (things) {
                if (angular.equals(things, selectedValue.name)) {
                     tempThings.push(things);
                }
            });
        });
        return tempThings;
    } else {
        return things;
    }
};
}]);

Answer 1

实际上有一个预定义的Angular功能可以执行您想要执行的操作。 Angular中的过滤器可以取消，这意味着您可以从选择中明确排除选项。我建议您在选择中使用ng-init，否则可能会遇到未定义的过滤器选项。

以下是显示我的解决方案的一些代码：

<select ng-model="select1" ng-init="select1 = things[0]" ng-options="thing.name for thing in things | filter:{name:'!'+select2.name}"></select>
<select ng-model="select2" ng-init="select2 = things[1]" ng-options="thing.name for thing in things | filter:{name:'!'+select1.name}"></select>

而here是一个展示行动的人。

要进一步阅读过滤器，您可能需要查看API here

您也可以将选择部分作为数组来处理

<select ng-model="select[0]" ng-init="select[0] = things[0]" 
    ng-options="thing.name for thing in things | filter:{name:'!'+select[1].name}"></select>
    <select ng-model="select[1]" ng-init="select[1] = things[1]" 
    ng-options="thing.name for thing in things | filter:{name:'!'+select[0].name}"></select>

但是如果你想要动态选择，你必须写一个我喜欢的自定义过滤器：

过滤

.filter('exclude', [function () { return function(input,select,selection){ var newInput = []; for(var i = 0; i < input.length; i++){ var addToArray=true; for(var j=0;j<select.length;j++){ if(select[j].name===input[i].name){ addToArray=false; } } if(addToArray || input[i].name === selection.name){ newInput.push(input[i]); } } return newInput; };

用法：

<div ng-repeat="sel in select"> <select ng-model="select[$index]" ng-init="sel" ng-options="thing.name for thing in things | exclude:select:sel"></select> </div>

here是一个显示此解决方案的傻瓜。

角度过滤器选择列表，不包括所选值

1 个答案: