Preselect items by remote call in multiple select with object items doesn't work

[Thomas-Adams]

When trying to preselect a ui-select with multiple selected items, retrieved by a remote call, here $http service, the preselection is not set.

Example: The following does not work

$http.get(baseUrl + "/todotags/" + $scope.todoForm.id,{}).
    success(function(data, status, headers, config){
    $scope.todoForm.selectedTags  = data.records;           
 }).error(....);

Whereas setting it o an array of values that were fetched in a previous step does work:

$http.get(baseUrl + "/todotags/" + $scope.todoForm.id,{}).
    success(function(data, status, headers, config){
    $scope.todoForm.selectedTags  = [array of values previuosly fetched];           
 }).error(....);

In both case the remotely fetched data array and the fixed array are identical.

The corresponding HTML:

<ui-select multiple ng-model="todoForm.selectedTags" theme="bootstrap"  class="selectize-control">
    <ui-select-match placeholder="Select tags...">{{$item.text}}</ui-select-match>
    <ui-select-choices refresh-delay="110" repeat="tag in tags">
        {{tag.text}}
    </ui-select-choices>
</ui-select>

The array looks like this :

[
    {
        "id" : 9,
        "guid" : "09efa3cd-a5cd-4ea0-8a1c-83fc66860895",
        "text" : "Node.js",
        "createdAt" : "2014-11-14T10:06:52.000Z",
        "updatedAt" : null
    }, {
        "id" : 10,
        "guid" : "d765b48c-cb5a-49d8-af55-f70ebc5ff11f",
        "text" : "Sequelizer.js",
        "createdAt" : "2014-11-14T10:06:59.000Z",
        "updatedAt" : null
    }, {
        "id" : 11,
        "guid" : "c4b5f0dc-f11f-4bba-af47-584aa4e50c9b",
        "text" : "SQLite",
        "createdAt" : "2014-11-14T10:07:05.000Z",
        "updatedAt" : null
    }
]

Is there any possibility to make that work?

Cheerio Thomas

[richardallen]

I had a similar problem using $resource. The objects retrieved using $resource are of type Resource and the model object they are compared to is type Object. Otherwise, the two objects are identical. However, the test if (result == value) within checkFnMultiple at line 651 of select.js evaluates to false. I had to swap the model object with its equivalent Resource object to get the option selected.

Ideally, ui-select would allow the user to specify the object property to compare by or provide a comparison function.

[richardallen]

PR #256 provides a fix.

[alvarezmario]

I have this same issue and I tested this even without a remote server call, so the server response is not the one causing this issue. In the example Demo Multiple, in Plunker, in the Array of Objects section, by default are two items selected, by doing this in the code:

$scope.multipleDemo.selectedPeople = [$scope.people[5], $scope.people[4]];

This works fine, but when I change that for this:

$scope.multipleDemo.selectedPeople = [{ name: 'Michael',   email: 'michael@email.com',   age: 15, country: 'Colombia' }];

The items are no preselected anymore. This is weird, because it's basically the same, so it should work, but it doesn't.

Anyone know why?

[yaneq]

I have similar problems. The reason seems to be that the control will only add values that are listed in the options. In my use-case i have the profile of a person which might speak several languages. The languages he might have added to his profile previously are not shown in ui-select.

Here is a demo of the behavior:
http://plnkr.co/edit/swKr14zURxlrvdTdUt7O

[alvarezmario]

That's exactly what happens with me

2014-11-19 12:03 GMT-05:00 Jan Koeppen notifications@github.com:

I have similar problems. The reason seems to be that the control will only
add values that are listed in the options. In my use-case i have the
profile of person which might speak several languages. The languages he
might have added to his profile previously are not shown in ui-select.

Here is a demo of the behavior:
http://plnkr.co/edit/swKr14zURxlrvdTdUt7O

—
Reply to this email directly or view it on GitHub
#404 (comment)
.

[yaneq]

I opened a PR that fixed the problem for me #419

[yaneq]

seems to be a duplicate of #192

I solved it now by setting the choices to the model value on page load and it seems to work well.

[Adriien-M]

yaneq's fix worked for me... Thanks!

[sagar-ranglani]

Facing same problem!
Can someone please explain the solution with an example.

Thank you in advance!

[Flightfreak]

This behaviour is resulting from the fact that the pre-selected items are checked for equal reference with the provided source items by the checkFnMultiple function (https://github.com/angular-ui/ui-select/blob/master/dist/select.js#L954). That behaviour is nicely demonstrated by @Nomack84 test (Identical objects, but different references). To my current knowledge (first time user) the test is required to keep tidy ship and avoid duplicate values in the list and result-set but the current function fails to handle hard copies of the source items. This #256 should fix this.