angularJs 从数组中排除已选择的项目答案

【问题标题】：angularJs exclude already selected items from arrayangularJs 从数组中排除已选择的项目
【发布时间】：2015-10-26 18:30:16
【问题描述】：

我在 $scope.currentSChannels.scgsLink 中有一个对象数组这个对象数组有类似的东西

$scope.currentSChannels.scgsLink = [{channelId:1, sCgsLinkId:1, groupNo:1, percent: 50, expireHrs:4},{channelId:1, sCgsLinkId:2, groupNo:2, percent:50, expireHrs:1}]

我还有以下选择列表

<div class="col-md-4">
                <select class="form-control" ng-model="newLink.groupNo"
                        name="groupNo" id="groupNo" 
                        ng-options="t.value as t.text for t in metaData.spGroups"></select>
            </div>

我需要过滤该列表以不显示 $scope.currentSChannels.scgsLink groupNo 列中已选择的项目。我查看了http://christian.fei.ninja/Angular-Filter-already-selected-items-from-ng-options/ 和AngularJS ng-options to exclude specific object，两者似乎都很接近，但还不够，因为我需要过滤数组和该数组中的特定列。我应该如何实现该过滤？

【问题讨论】：

标签： javascript arrays angularjs angularjs-filter

【解决方案1】：

模板变得有点棘手。假设selectedLink是指向所选groupNo的变量

ng-options="t.value as t.text for t in metaData.spGroups | filter: {value: '!' + currentSChannels.scgsLink[selectedLink].groupNo}"

参见 this fiddle ：第二个选择包含与第一个相同的集合，排除已选择的集合。

编辑：上面的解决方案是根据一个值排除元素。为了根据值集合排除元素，自定义过滤器最适合：

过滤器

app.filter('channelFilter', function () {
    return function (metadata, exclusions) {
        var filterFunction = function (metadata) {
            // return the metadata object if exclusions array does NOT contain his groupNo
            return !exclusions.some(function (exclusion) {  
                return exclusion.groupNo === metadata.value;
            });
        };

        return metadatas.filter(filterFunction);
    };
});

用法

ng-options="metadata in metadatas | channelFilter: exclusions"

模板

ng-options="t.value as t.text for t in metaData.spGroups | channelFilter: currentSChannels.scgsLink"

Fiddle

也就是说，将所选链接按groupNo 分组会更有效，以避免在数组中搜索并在控制器中进行过滤。

【讨论】：

您的示例中的 selectedLink 是什么？我想实施 NOT IN 过滤器，我想排除所有已选择的组。正如我在示例中所示，我已经分配了 2 个组。我想只允许选择尚未包含在该复杂属性中的组（该属性是我展示的对象数组）。
“我需要过滤一个数组和该数组中的特定列”。根据这句话，我认为您只需要过滤一项即可。如果您需要过滤scgsLink 的所有元素，我会定义一个自定义过滤器...
我也是这么想的，但是我并不清楚博客文章中的那个示例。它似乎也只适用于一项。你能帮我写这个自定义过滤器吗？
是的。顺便说一句，您的项目中有 lodash 或 underscore 之类的 js 库吗？
我已经搜索了解决方案，我们不使用 underscore.js，尽管我看到很少有 cmets 告诉代码是从它借来的。我们已经使用 lodash

【解决方案2】：

我想让它更通用一点，所以我做了以下操作

http://jsfiddle.net/96m4sfu8/

app.filter('excludeFrom', function () {
    return function (inputArray, excludeArray, excludeColumnName, inputColumnName) {
        if (inputColumnName==undefined)
            inputColumnName = 'value';
		var filterFunction = function (inputItem) {
            return !excludeArray.some(function (excludeItem) {
                return excludeItem[excludeColumnName] === inputItem[inputColumnName];
            });
        };

        return inputArray.filter(filterFunction);
    };
});

【讨论】：