Angular pre-select multiple values in Multi Select field

Question

Trying to pre-select multiple values in my selectfield.

My HTML

    <select multiple 
            data-ng-options="e.id for e in myElements"
            data-ng-model="mySelect">
    </select>

Put data in the select box (works fine)

    var elements = [
        { "id": "AAA" },
        { "id": "BBB" },
        { "id": "CCC" },
        { "id": "DDD" },
        { "id": "EEE" },
        { "id": "FFF" },
        { "id": "GGG" }
    ]
    $scope.myElements = elements;

This does NOT work

    var preselected = [
        { "id": "BBB" },
        { "id": "DDD" },
        { "id": "FFF" }
    ]
    $scope.mySelect = preselected;

This does NOT work

    var preselected = [ "BBB", "DDD", "FFF" ]
    $scope.mySelect = preselected;

Anyone got any ideas?

Possible duplicate of [How to set a default value to ng-options (multiple select)](http://stackoverflow.com/questions/27351251/how-to-set-a-default-value-to-ng-options-multiple-select) — Aluan Haddad, May 17 '17 at 02:18
I read something about `track by elements.id` but im not quite sure how that would work? — torbenrudgaard, May 17 '17 at 02:21
The accepted answer to the linked question explains how. There are live examples of different approaches. I just messed with one and it works in the latest version. — Aluan Haddad, May 17 '17 at 02:27

The.Bear · Accepted Answer · 2017-05-17T04:25:38.237

3

You have two options:

1- Use as and track by if you want objects as selected values (PLUNKER)

ng-options="e as e.id for e in vm.elements track by e.id"

HTML

<select multiple
    ng-options="e as e.id for e in vm.elements track by e.id"
    ng-model="vm.selecetedValues">
</select>

CONTROLLER

function MainCtrl() {
    var vm = this;

    vm.elements  = [{ "id": "AAA" },{ "id": "BBB" },{ "id": "CCC" }];

    vm.selectedValues = [
        { "id": "AAA" },
        { "id": "CCC" }
    ];
}

2- Only Use as syntax if you want strings or numbers as selected values (PLUNKER)

ng-options="e.id as e.name for e in elements"

first argument e.id is the value of selected option
second argument e.name is the displayed value

In your case: ng-options="e.id as e.id for e in elements"

HTML

<select multiple
    ng-options="e.id as e.id for e in vm.elements"
    ng-model="vm.selecetedValues">
</select>

CONTROLLER

function MainCtrl() {
    var vm = this;

    vm.elements  = [{ "id": "AAA" },{ "id": "BBB" },{ "id": "CCC" }];

    vm.selectedValues= [
        "BBB",
        "DDD"
    ];
}

edited May 17 '17 at 04:25

answered May 17 '17 at 03:21

The.Bear

5,621
2
27
33

Bear - that worked! Both of them!! I didnt know the trick where you use the vm.elements and vm.selectedValues. Thanks for teaching me something new :) – torbenrudgaard May 17 '17 at 04:01
I've used `controller as` syntax. Check this [John Papa guideline](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#controlleras-view-syntax) to know more about it. Also, check these posts (http://stackoverflow.com/questions/21287794/angularjs-controller-as-syntax-clarification) and (http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers) – The.Bear May 17 '17 at 04:07
1

Hmm I said that too early. How do you define vm? `var vm = this;` ? – torbenrudgaard May 17 '17 at 04:23
Yes, you are right. Sorry, I forgot that line in the answer (I've edited). That line is just to not write `this` lot of times. – The.Bear May 17 '17 at 04:27
Hmm do I also need to define vm as the controller? `
– torbenrudgaard May 17 '17 at 04:30
Yes - that did the trick. Now I am getting data in the select fields. but the `ng-model="vm.selecetedValues"`is not working. – torbenrudgaard May 17 '17 at 04:34
1

Ahh you made a typo `selecetedValues`should be ´selectedValues`- didnt see that one at first hehe :-D – torbenrudgaard May 17 '17 at 04:39
Perfect. It was weird if it doesn't work because you were doing well... Good Luck :) – The.Bear May 17 '17 at 04:41
Bear - one last thing. Say I want to put a custom option as the first element `` - how would I do that? Is there a way to insert that into the elements after they get their data from mongodb (thats what they do now). – torbenrudgaard May 17 '17 at 04:57
I tried to do this, but it does not work `vm.propertyIdList = [{ "_id": "ALL" }] + response.data.data;` any suggestions would be very welcome :) – torbenrudgaard May 17 '17 at 05:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/144405/discussion-between-the-bear-and-torbenrudgaard). – The.Bear May 17 '17 at 05:03

Angular pre-select multiple values in Multi Select field

1 Answers1