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

Question

Ok, I know this has been covered before and I've tried all those results but can't get them to work in my situation:

I'm trying to use angular ui-select with multiple data sources - one for default choices and another for selectable options but no dupes should occur

For example:

for the ng-model binding, I am using an empty array on the $scope that gets populated with categories associated with the post from an API endpoint called "categories".

For the default selected choices, I'm getting categories already associated with the post object - this comes from another api endpoint.

My Controller

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;

  });

My 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>

The problem is, no matter what I do, there's always duplicates and angular freaks out with the following error:

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

oh and I've tried using "track by $index" but no luck.

How do I use two different data sources and get ui-select to remove duplicates from the choices dropdown when they're already present from another data source?

Plnkr demonstrating my issue: http://plnkr.co/edit/WDthr7?p=preview

well, even though the object content looked the same, but they are actually different objects, I don't know if ui-select is smart enough to dedup them. why don't you manually merge them when you get the result? — sdfacre
– sdfacre, Commented Jan 22, 2016 at 1:56
I thought about that too. I just figured there had to be a way to do it with ui-select considering others have probably had the same issue. I am open to the alternative though. How would you go about that? — friendlyfire
– friendlyfire, Commented Jan 22, 2016 at 2:15
check this out plnkr.co/edit/NPdxYK8fqCPMhsKXRSGH?p=preview, just to save time, the merging logic is only for this example though. — sdfacre
– sdfacre, Commented Jan 22, 2016 at 2:17
That worked like a champ. Simple and short. Leave an answer and I'll accept it and vote. — friendlyfire
– friendlyfire, Commented Jan 22, 2016 at 2:36

Pandi_Snkl · Accepted Answer · 2016-07-18 15:03:17Z

2

add filter in "<ui-select-choices/>"

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

demo uiselect - plunker

(or) use track by id or name in your <ui-select-choices/> tag(this one is working for me)

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

answered Jul 18, 2016 at 15:03

Pandi_Snkl

5045 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sdfacre · Accepted Answer · 2016-01-22 02:55:11Z

An alternative way is to merge them by yourself. see http://plnkr.co/edit/NPdxYK8fqCPMhsKXRSGH?p=preview

In the controller: -

$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];
            }
         }   
      });
  });

please note that the above merging logic works only for this example for time saving.

Collectives™ on Stack Overflow

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

I'm trying to use angular ui-select with multiple data sources - one for default choices and another for selectable options but no dupes should occur

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

I'm trying to use angular ui-select with multiple data sources - one for default choices and another for selectable options but no dupes should occur

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related