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) — Aluan Haddad
– Aluan Haddad, Commented May 17, 2017 at 2:18
I read something about track by elements.id but im not quite sure how that would work? — torbenrudgaard
– torbenrudgaard, Commented May 17, 2017 at 2: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
– Aluan Haddad, Commented May 17, 2017 at 2:27

The.Bear · Accepted Answer · 2017-05-17 04:25:38Z

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, 2017 at 4:25

answered May 17, 2017 at 3:21

The.Bear

5,8952 gold badges31 silver badges34 bronze badges

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

11 Comments

torbenrudgaard Over a year ago

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

The.Bear Over a year ago

I've used controller as syntax. Check this John Papa guideline to know more about it. Also, check these posts (stackoverflow.com/questions/21287794/…) and (stackoverflow.com/questions/11605917/…)

torbenrudgaard Over a year ago

Hmm I said that too early. How do you define vm? var vm = this; ?

The.Bear Over a year ago

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.

torbenrudgaard Over a year ago

Ahh you made a typo selecetedValuesshould be ´selectedValues`- didnt see that one at first hehe :-D

|

Collectives™ on Stack Overflow

Angular pre-select multiple values in Multi Select field

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related