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.alreadySelected = function(language) {
  return !scope.localizations.filter(function(selectedValue) {
    return selectedValue.language === language.value;
  }).length;
};

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

如果可以使用澄清，请告诉我。谢谢！

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

Answer 1

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

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

将alreadySelected函数替换为：

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

AngularJS - 从ng-repeat内部ng-repeat过滤已选择的项目

1 个答案: