javascript - angularJs 从数组中排除已经选择的项目

Question

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

$scope.currentSChannels.scgsLink = [{channelId:1, sCgsLinkId:1, groupNo:1, percentage: 50, expireHrs:4},{channelId:1, sCgsLinkId:2, groupNo:2, percentage:50,过期时间: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两者似乎很接近但还不够，因为我需要针对数组和该数组中的特定列进行过滤。我应该如何实现该过滤？

Answer 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 对所选链接进行分组以避免在数组中搜索并在 Controller 中进行过滤会更有效。