AngularJS - 从 ng-repeat 中的 ng-select 过滤已选择的项目答案

【问题标题】：AngularJS - Filter already selected items from ng-select inside ng-repeatAngularJS - 从 ng-repeat 中的 ng-select 过滤已选择的项目
【发布时间】：2017-01-24 19:41:32
【问题描述】：

我发现了类似的问题，但没有人遇到与我相同的问题。我有一个用户可以添加的本地化列表（用于构建他们自己的 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.alreadySelected = function(language) {
  return !scope.localizations.filter(function(selectedValue) {
    return selectedValue.language === language.value;
  }).length;
};

scope.localizations 包含已选择的项目。这几乎可以工作，但它具有过滤掉从选择框本身中选择的选项的效果，因此当您选择一个选项时，它会被过滤掉并且选择框显示为空白。我需要该选择框的选定项目仍然显示并可选择，但只能在该特定选择框中（而不是 ng-repeat 中的其他选择框）。

让我知道这是否可以使用澄清。谢谢！

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

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-ng-repeat angularjs-filter

【解决方案1】：

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

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

【讨论】：