AngularJS-从ng-select到ng-reeat中过滤已经选择的项目

Question

我发现了类似的问题，但没有人遇到与我相同的问题。我有一个用户可以添加的本地化列表(用于构建他们自己的UI本地化)。同一项目可以有多种语言，因此可以键入文本并从下拉列表中选择相应的语言。

我只希望他们能够选择一种语言一次(列表中有两种相同的语言对他们来说毫无意义)。这是HTML:

<div class="divider-header">
<h4>{{'contactAttributes.localization.title' | translate}}</h4>
<button id="add-label-btn" class="btn pull-right" title="Add a label"
ng-click="addLocalization()">
<i class="fa fa-plus center"></i>
</button>
</div>
<div ng-repeat="item in localizations track by $index">
<div class="input-group localization-group">
<label>{{'value.label' | translate}}</label>
<input type="text" ng-model="item.label">
<label>{{'value.language' | translate}}</label>
<select
required
ng-options="locale.value as locale.label for locale in localeNames | filter: alreadySelected" 
ng-model="item.language"></select>
<i id="remove-localization-label"
class="fa fa-times remove"
ng-click="removeLocalization($index)"></i>
</div>
</div>

"alreadySelected"过滤器如下所示(在指令中，因此为scope而不是$scope)：

scope.alreadySelected = function(language) {
return !scope.localizations.filter(function(selectedValue) {
return selectedValue.language === language.value;
}).length;
};

scope.locations包含已选择的项。这几乎是可行的，但它的效果是过滤掉从选择框中选择的选项，因此当您选择一个选项时，它会被过滤掉，选择框显示为空白。我需要该选择框中的所选项目仍然显示并可选择，但仅在特定的选择框中(而不是ng重复中的其他项目)。

让我知道这是否需要澄清。谢谢

编辑：这是一个显示问题的plunkr-https://plnkr.co/edit/ALu00gitPg7GLfdGQ75a

Answer 1

所以我在lodash的帮助下找到了一个解决方案。将ng选项更改为：

ng-options="locale.value as locale.label for locale in availableLocales($index)"

将已选择的功能替换为：

scope.availableLocales = function(localizationIndex) {
return scope.localeNames.filter(function(locale) {
return !_.find(scope.localizations, function(localization, idx) {
if (localizationIndex === idx) return false;
return localization.language === locale.value;
});
});
};

如果有人有其他解决方案，请随时分享，否则，感谢您成为我的橡皮鸭StackOverflow。：P