我尝试使用带有多个数据源的角度ui-select - 一个用于默认选项，另一个用于可选择的选项但不应出现欺骗

例如：

对于ng-model绑定，我在$ scope上使用了一个空数组，该数组使用一个名为＆＃34; categories＆＃34;的API端点与该帖子相关联的类别填充。

对于默认选择的选项，我的类别已经与帖子对象相关联 - 这来自另一个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>

问题在于，无论我做什么，都会出现重复和角度异常，并出现以下错误：

＆＃34;错误：[ngRepeat：dupes]不允许在转发器中重复。使用＆＃39;跟踪＆＃39;表达式以指定唯一键。＆＃34;

哦，我已尝试使用＆＃34;跟踪$ index＆＃34;但没有运气。

如何使用两种不同的数据源并获取ui-select，以便在选项下拉列表中从其他数据源中删除重复项时删除重复项？

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

Answer 1

在"<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>

Answer 2

另一种方法是自己合并它们。见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];
            }
         }   
      });
  });

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

当使用另一个默认选择的数据源时，从ui-select选项中删除重复项

我尝试使用带有多个数据源的角度ui-select - 一个用于默认选项，另一个用于可选择的选项但不应出现欺骗

2 个答案: