How to set default values to multi-select dropdown

Question

I have a model (param) with properties:

param.ValidValues (array of key-value pair)
param.DefaultValues (array of value strings)

I am rendering multi-select dropdown

<select multiple ng-model="param.DefaultValues">
    <option ng-repeat="item in param.ValidValues" value="{{item.Value}}" label="{{item.Key}}" 
        ng-selected="???">
    </option>
</select>

Question: How can I (using AngularJS markup syntax) set default values in this dropdown (pre-select options that match whatever is in param.DefaultValues) ?? Use ng-selected or there is another option?

For example:

if ValidValues = ["one", "two", "three", "four"] and DefaultValues = ["two", "three"]

then "two", "three" should be pre-selected. Makes sense?

Please note, I cant modify param.ValidValues collection.

On your controller you should save the value inside the select's `ngModel` - `$scope.param.DefaultValues = ['firstDefaultItemValue', 'secondDefaultItemValue'];` — Alon Eitan, Jan 26 '17 at 20:37
@Alon Eitan, sorry, didnt get that. DefaultValues used to initialise the control, but also used as a model for user's selection — monstro, Jan 26 '17 at 20:57

YuryDG · Accepted Answer · 2017-01-27T16:16:24.140

2

<div ng-controller="myCtrl as $ctrl">    
  <select multiple ng-model="$ctrl.selectedValues"
    ng-options="o.value as o.title for o in $ctrl.languages">
    <option value=""></option>
  </select>
  <br>
  {{$ctrl.selectedValues}}
</div>

app.js file

var app = angular.module('app', []);
app.controller('myCtrl', function ($scope) {
this.languages = [
  {value: 'C#', title : 'C Sharp'},
  {value: 'PHP', title : 'p h p'},
  {value: 'Go', title : 'Go javascript'},
  {value: 'ES6', title: 'javascript'},
  {value: 'R', title: 'Rust'}
]   

this.selectedValues = ["C#","Go","R"];
});

edited Jan 27 '17 at 16:16

answered Jan 26 '17 at 21:09

YuryDG

425
3
7

I already have it: ng-model="param.DefaultValues" – monstro Jan 26 '17 at 22:42
Check this [link in jsfiddle](https://jsfiddle.net/yurydg/pgt9tqg2/) – YuryDG Jan 27 '17 at 16:42

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

try this stackoverflow.com

<select multiple ng-model="param.DefaultValues" ng-init="param.DefaultValues = item[0]">
<option ng-repeat="item in param.ValidValues" value="{{item.Value}}"    label="{{item.Key}}" 
    ng-selected="???">
</option>
</select>

edited May 23 '17 at 12:33

Community

1
1

answered Jan 26 '17 at 20:44

ambussh

740
1
7
18

But they ask about multiple options, not a single one – Alon Eitan Jan 26 '17 at 20:47
Sory, my mistake. I don't see this when i read. – ambussh Jan 26 '17 at 20:50

How to set default values to multi-select dropdown

2 Answers2

Linked