Javascript 角度过滤器选择列表不包括选定值_Javascript_Angularjs

Javascript 角度过滤器选择列表不包括选定值

javascript angularjs

Javascript 角度过滤器选择列表不包括选定值,javascript,angularjs,Javascript,Angularjs,我有一个动态html块，用户可以为它添加多个选择列表。我想通过使用自定义过滤器进行检查来禁用用户在以前列表中所做的选择。我正在努力解决的部分是如何将动态模型传递到过滤器中，并检查该值是否不存在于已生成的选择列表中 angular.module('app',[]) .filter('excludeFrom', [function () { return function (things, selectedValue) { if (!angular.isUndefined(things) &

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

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;
    }
};
}]);

我创造了一个新的世界。我感谢你的帮助

<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;
    }
};
}]);

实际上，有一个预定义的角度特征，可以完成您想要做的事情。角度过滤器可以被否定，这意味着您可以明确地从选择中排除选项。不过，我建议您在选择时使用nginit，否则您可能会遇到未定义的过滤器选项

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;
    }
};
}]);

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

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;
    }
};
}]);

<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>

这是一个plnkr在行动中展示它

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;
    }
};
}]);

要进一步了解过滤器，您可能需要查看API

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;
    }
};
}]);

也可以像这样将选择零件作为数组处理

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;
    }
};
}]);

<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>

但是，如果您想要有一个动态选择，您必须编写一个自定义过滤器，我非常喜欢：

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;
    }
};
}]);

过滤器：

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;
    }
};
}]);

使用方法：

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;
    }
};
}]);

这是一个plunkr，显示了这个解决方案。

Hi@Bricktop，我试图动态地传递模型。这是不可能的吗？嗨，吉米，我不知道你说的动态模型是什么意思；我猜是一个动态长度的模型？这应该是可能的，但可能更难实现。我将尝试找到一个解决方案，但可能需要一些时间。如果我将from ng model=select1中的值显式传递给过滤器，它就会工作。如果我试图传递整个模型，其中包含多个值，则会出现解析错误。当然，这可以作为对象传递？我编辑了我的答案，如果我理解正确，您需要两个对象。一个用于将当前选择保存在数组中，另一个用于保存所有可能的选项并删除所选的选项。如果我将from ng model=select1中的值显式传递给过滤器，则它会工作。如果我试图传递包含多个值的整个模型，就会得到解析错误。当然，这可以作为对象传递吗？ng模型=选择模型，过滤器：选择模型

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;
    }
};
}]);