2

Solution:

Figured it out myself: The whole proble is no problem any longer after applying this fix and doing my custom build of the ui-select. I hope this is going to get into the official master branch some time soon!

Problem

How do I initialize a select with multiple values? I'm trying this but it doesn't show the selected items in the selection.

First I thought it has something do to with the data that I'm getting async via HTTP get but not even the "static" plunker example I've made to show the problem works for me.

I think my issue is that the data comes from two different sources so the index and by this references between the two arrays don't match. The list of categories is fetched with a service and the selected categories come from another service that are returned together with the data set that is attached to them. And in another select it would be pretty impractical to load all 45k users just to pick the selected ones from that huge list.

So how could I make my existing selection data appear in the ui-select?

Plunker link.

HTML

<body ng-controller="MainCtrl">
        <label>Assigned Categories</label>
        <ui-select
            multiple
            ng-model="categories.selected"
            on-select="selectCategory($item, $model)"
            on-remove="deselectCategory($item, $model)">
            <ui-select-match placeholder="Select Category...">{{$item.name}}</ui-select-match>
            <ui-select-choices
                repeat="category in categories.categories track by category.id">
            {{category.name}}
            </ui-select-choices>
        </ui-select>
        <pre>{{categories | json}}</pre>
</body>

JS

var app = angular.module('plunker', [
  'ui.select'
]);

app.controller('MainCtrl', function($scope) {
        $scope.categories = {
            selected: [
        {
          "id": "1",
          "name": "Foo"
        }
            ],
            categories: [
        {
          "id": "1",
          "name": "Foo 1"
        },
        {
          "id": "2",
          "name": "Bar 2"
        },
        {
          "id": "3",
          "name": "FooBar 3"
        }
            ]
        };
});
Improve this question

1 Answer 1

Reset to default
1

The way to "initialize" the select or ui-select, or any other ng-model-type input is by setting the ViewModel variable that goes into the ng-model to whatever the selected value or object (as is in this case) you want.

You attempted to do that in your example, but since you are selecting an object, your VM should have referred to the same object (by reference). Your error was that you instead created a different object with the same content.

So, $scope.categores.selected should be an array (since it's multiple) of the actual objects:

$scope.categories = {
   categories: [
        {
          "id": "1",
          "name": "Foo 1"
        },
        {
          "id": "2",
          "name": "Bar 2"
        },
        {
          "id": "3",
          "name": "FooBar 3"
        }
    ]
};

$scope.categories.selected = [$scope.categories.categories[0]];
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

So in short you're telling me to pass the index integer into that array instead of the whole object? Well, this causes me a few other problems then. Is there a way I can track the selection other than by it's array index?
No, I'm telling you to pass the object by reference; i.e. the object itself. The selection would be the actual object - not an array index
My issue is that the data comes from two different sources so the index and by this reference as you suggest won't match. The list of categories is fetched with a service and the selected categories come from another service that are returned together with the data set that is attached to them. And in another select it would be pretty impractical to load all 45k users just to pick the selected ones from that huge list.
This github.com/angular-ui/ui-select/pull/256 describes my issue pretty well and according to github.com/angular-ui/ui-select/issues/404 this is still not working.
I'm not understanding your issue. ng-model at all times refers to the actual selection - whether set by controller or by ui-select. If your selected records come from a different place, then find which actual objects they refer to in the data set you received from the server and set the selected array to these objects. If you don't want to select objects, then select ids instead
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.