Javascript 存在于另一个数组中的筛选器选项

我有两个数组，countries和selectedCountries

用户可以将国家/地区添加到所选国家/地区

现在，我只想显示用户尚未选择的国家（已选择国家/地区中的国家）-但是我不知道如何实现这一点

以下是HTML：

<div ng-controller="MyCtrl">
    <select 
        ng-model="selectedCountry"
        ng-options="country.name for country in countries"></select>
    <button ng-click="addCountry(selectedCountry)">Add country</button>

    <table>
        <tr ng-repeat="country in selectedCountries">
            <td>{{ country.name }}</td>
        </tr>
    </table>
</div>

如何筛选显示的国家/地区

---

下面是一个可行的

为什么不从

$范围中删除国家/地区。国家/地区

被选中时：

$scope.addCountry = function(country) {
    $scope.selectedCountries.push(country);
    $scope.countries.splice($scope.countries.indexOf(country), 1);
}

$scope.addCountry = function (country) {
    $scope.selectedCountries.push(country);
    country.selected = true;
}

<select ng-model="selectedCountry" 
        ng-options="country.name for country in countries|filter:{selected:'!true'}">
</select>

使用过滤器的另一种有效方法是将国家/地区对象标记为选中，并过滤掉未选中的对象：

$scope.addCountry = function(country) {
    $scope.selectedCountries.push(country);
    $scope.countries.splice($scope.countries.indexOf(country), 1);
}

$scope.addCountry = function (country) {
    $scope.selectedCountries.push(country);
    country.selected = true;
}

<select ng-model="selectedCountry" 
        ng-options="country.name for country in countries|filter:{selected:'!true'}">
</select>

$scope.addCountry=功能（国家）{
$scope.selectedCountries.push（国家）；
country.selected=true；
}

---

在js中更改此选项：

$scope.addCountry = function(country) {
    $scope.selectedCountries.push(country);
    $scope.notselectedcountries = [];
    $scope.countries.map(function(item) {
       if($scope.selectedCountries.indexOf(item) < 0)
           $scope.notselectedcountries.push(item);
    })
}

$scope.addCountry=功能（国家）{
$scope.selectedCountries.push（国家）；
$scope.notselectedcountries=[]；
$scope.countries.map（功能（项目）{
如果（$scope.selectedCountries.indexOf（项目）<0）
$scope.notselectedcountries.push（项目）；
})
}

在您的html中：

<table ng-if="notselectedcountries.length > 0" border="1">

---

如果要保持

国家

的完整性，可以将select绑定到一个函数，而不是从

国家

中筛选出

所选国家

：

在控制器中添加

$scope.unselectedCountries = function() {
    return $scope.countries.filter(function(c) {
        return $scope.selectedCountries.indexOf(c) == -1;
    });
};

然后

---

为它创建一个过滤器。您的HTML：

        ng-options="country.name for country in countries |notin:selectedCountries"

和您的过滤器：

app.filter('notin',function(){
    return function(items,matchset) {
        return items.filter(function(item){
            return matchset.indexOf(item) < 0;
        });
    };
});

app.filter（'notin'，function（）{
返回函数（项目、匹配集）{
返回项目。过滤器（函数（项目）{
返回matchset.indexOf（item）<0；
});
};
});

它将自动使它们保持最新。此处更新了小提琴：

控制器：

   $scope.notinSelectedCountries=function(item)
                        {
                            if ($scope.selectedCountries.indexOf(item) < 0)
                            return true
                        }

$scope.notinSelectedCountries=功能（项目）
{
如果（$scope.selectedCountries.indexOf（项目）<0）
返回真值
}

视图：

ng options=“country.name for country in countries |过滤器：notinSelectedCountries”

---

它不会更改数组，只需使用过滤器

如果，则无需更改

ng-如果他们都选择了怎么办？这是我一直在寻找的。但是，从所选国家/地区中删除国家/地区时，它不会重新出现。对不起，我在小提琴中犯了错误，您不应该在
addCountry
中从
countries
中删除-应该注意，这是一个O（N^2）操作，每次应用过滤器时都会运行。我想说这不是最有效的方法。有没有更有效的方法？由于
匹配集
和
项目
将随着每次单击而更改，因此必须再次运行。有两种解决方案，其中一种在单击按钮时使用O（N）操作（不使用筛选器），另一种使用运行时间为O（N）的筛选器，并向按钮单击事件添加O（1）操作。如果您能够修改原始项，则为True。除非是相当大的一套，否则我不会太担心。