Angular 1.x：使用 select & ng-options 和自定义过滤器

Question

前言

我编写了一个自定义过滤器，用于从多个 <select> 输入的可用选项列表中排除当前选定的选项。

codepen - http://codepen.io/jusopi/pen/XdjNWa?editors=1010

模板实现

<select class="form-control" ng-model="vc.cols[0].attr" 
    ng-options="opt.attr as opt.name for opt in vc.opts | excludedAttrs:vc.cols">

过滤器

.filter('excludedAttrs', function () {
    return function (opts, cols) {
        return _.differenceWith(opts, cols, function (opt, col) {
            return opt.attr === col.attr;
        });
    };
})

问题

我不确定这是我对 Lodash 的 differenceWith (API docs) 的误解，还是在使用带有 <select> 的过滤器而不是其他输入时是否有一些微妙之处。

据我了解differenceWith，它旨在比较 2 个数组并使用 比较器 函数，如果要排除它们，则 returns 为真。过滤器确实有效，但为什么它不能正确呈现 ng-model 默认值或所选值？

Answer 1

select 未显示当前 selected ng-model 的问题是因为 ng-options 中不存在实际的 <option/> 由于过滤器将其排除在集合中。

为了解决这个问题，我需要排除当前 selected 的值（即 ng-model 从...嗯，从被排除在外。基本上我不得不将它添加回过滤后的 ng-options.

codepen - http://codepen.io/jusopi/pen/XdjNWa?editors=1010

模板实现

<select ng-model="vc.cols[0].attr" 
    ng-options="opt.attr as opt.name for opt in vc.opts | excludedAttrs:vc.cols:0">

固定过滤器

.filter('excludedAttrs', function () {
    return function (opts, cols, i) {

        // fix
        cols = _.without(cols, cols[i]);
        // end fix

        return _.differenceWith(opts, cols, function (opt, col) {
            return opt.attr === col.attr;
        });
    };
})

Angular 1.x：使用 select & ng-options 和自定义过滤器

Angular 1.x: Using select & ng-options with a custom filter

select

angularjs

lodash

angular-ngmodel

angular-filters

前言

问题