使用其他数据源作为默认 selected 时，从 ui-select 选项中删除重复项

Question

好的，我知道之前已经介绍过了，我已经尝试了所有这些结果，但无法让它们在我的情况下工作：

我正在尝试将 angular ui-select 与多个数据源一起使用 - 一个用于默认选择，另一个用于 selectable选项但不应出现欺骗

例如：

对于 ng-model 绑定，我在 $scope 上使用了一个空数组，该数组填充了与来自名为 "categories" 的 API 端点的 post 关联的类别。

对于默认的 selected 选择，我得到的类别已经与 post 对象相关联 - 这来自另一个 api 端点。

我的控制器

app.controller('MainCtrl', function($scope, $http) {

    $scope.selectedTerms = [];

$http.get('currentTerms.json').then(function(currentTermsObj){

    var currentTerms = currentTermsObj.data;

        currentTerms.map(function(currentTerm){

        var currentPostTerm = currentTerm;

        $scope.selectedTerms.push(currentPostTerm); 
        });
  });



$http.get('possibleTerms.json').then(function(possibleTermsObj){

  $scope.possibleTerms = possibleTermsObj.data;

  });

我的HTML:

    <ui-select
        multiple
        ng-model="selectedTerms">
        <ui-select-match placeholder="Select Category...">{{$item.name}}</ui-select-match>
        <ui-select-choices
            repeat="term in possibleTerms">
        {{term.name}}
        </ui-select-choices>
    </ui-select>

问题是，无论我做什么，总是有重复项，angular 会出现以下错误：

"Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys."

哦，我试过使用 "track by $index" 但没有成功。

我如何使用两个不同的数据源并获取 ui-select 以从选择下拉列表中删除已存在于另一个数据源中的重复项？

Plnkr 演示我的问题：http://plnkr.co/edit/WDthr7?p=preview

Answer 1

另一种方法是自己合并它们。见 http://plnkr.co/edit/NPdxYK8fqCPMhsKXRSGH?p=preview

在控制器中：-

$http.get('currentTerms.json').then(function(currentTermsObj){

    var currentTerms = currentTermsObj.data;

        currentTerms.map(function(currentTerm){

        var currentPostTerm = currentTerm;

        $scope.selectedTerms.push(currentPostTerm); 
        });

        $http.get('possibleTerms.json').then(function(possibleTermsObj){

            $scope.possibleTerms = possibleTermsObj.data;
            for(var i = 0; i < $scope.possibleTerms.length; i++){
              if(i < $scope.selectedTerms.length){

              $scope.possibleTerms[i] = $scope.selectedTerms[i];
            }
         }   
      });
  });

请注意，为了节省时间，上述合并逻辑仅适用于此示例。

Answer 2

在 "<ui-select-choices/>"

中添加过滤器

<ui-select-choices repeat="color in availableColors | filter:$select.search">

演示 uiselect - plunker

(或) 在您的 <ui-select-choices/> 标签中按 ID 或名称使用曲目（这个对我有用）

<ui-select multiple ng-model="selectedTerms">
        <ui-select-match placeholder="Select Category...">{{$item.name}}</ui-select-match>
 <ui-select-choices repeat="term in possibleTerms track by term.name">  
 {{term.name}}
        </ui-select-choices>
    </ui-select>

使用其他数据源作为默认 selected 时，从 ui-select 选项中删除重复项

Remove duplicates from ui-select choices when using another data source for default selected

javascript

angularjs

angular-ui-select

我正在尝试将 angular ui-select 与多个数据源一起使用 - 一个用于默认选择，另一个用于 selectable选项但不应出现欺骗