javascript - 存在于另一个数组中的过滤器选项

Question

我有两个数组，countries 和 selectedCountries。

用户可以将国家从countries添加到selectedCountries。

现在，我只想显示用户没有已经选择的国家(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>

和当前的 Javascript:

function MyCtrl($scope) {
    $scope.countries = [
        { id: 1, name: 'Denmark' },
        { id: 2, name: 'Sweden' },
        { id: 3, name: 'Norway' }
    ];

    $scope.selectedCountries = [];

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

如何过滤显示的国家？

这是一个有效的 JSFiddle

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

它会自动使它们保持最新状态。在这里更新了 fiddle :http://jsfiddle.net/jxwbwjdq/1/