html multiple select unable to select multiple by default with angular

Question

If I have this html-code:

<select multiple>
    <option selected>
        one
    </option>
    <option selected>
        two
    </option>
</select>

Then I see that by default both options are selected.

However, if I create the html through angular, then only the last element is selected:

<select
multiple
class="form-control"
ng-model="mymodel">
<option selected="selected" ng-repeat="item in myarr.units" value="  {{item.id}}">{{item.name}}</option>
</select>

When I look at the generated html I see:

<select class="form-control ng-pristine ng-untouched ng-valid ng-empty"  multiple="" ng-model="mymodel">
<option selected="selected" ng-repeat="item in mymodel" value="2" class="ng- binding ng-scope">One</option>
<option selected="selected" ng-repeat="item in mymodel" value="3" class="ng-binding ng-scope">Two</option>
</select>

So both elements got a "selected" but only the last one is selected in GUI. Am I missing something?

whyyie · Accepted Answer · 2016-10-28 14:41:10Z

1

You should use ng-model to bind your selected value instead of using selected in option select.

Plunkr link

    <select name="multipleSelect" id="multipleSelect" ng-model="data" multiple=""
        ng-options="item.id as item.name for item in myarr.units"></select>

$scope.data = [1, 2]; // selected value

answered Oct 28, 2016 at 14:41

whyyie

8024 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

html multiple select unable to select multiple by default with angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related