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

Question

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

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

我还有以下 select 列表

<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 列中已经 selected 的项目。我查看了 http://christian.fei.ninja/Angular-Filter-already-selected-items-from-ng-options/ and also at AngularJS ng-options to exclude specific object，两者似乎很接近但还不够，因为我需要针对数组和该数组中的特定列进行过滤。我应该如何实施该过滤？

Answer 1

模板有点棘手。假设 selectedLink 是指向 selected groupNo

的变量

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

参见this fiddle：第二个select包含与第一个相同的集合，排除什么已经 selected.

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

过滤器

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

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

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

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

angularJs exclude already selected items from array

javascript

arrays

angularjs

angularjs-filter