Ionic /How to select multiple options from select control(Maximum selection will 3 options only)?

Question

I'm using the Ionic 1.3.16 version currently. Here I need to select multiple options in my select control.

Here my ionic HTML code:

<div class="list">
    <label class="item item-input item-select">
        <div class="input-label">
            Lightsaber
        </div>
        <select>
            <option>Blue</option>
            <option selected>Green</option>
            <option>Red</option>
        </select>
    </label>
</div>

Solution 1

You are missing the value attribute in select option, because when you select option it will reflect to the ng-model.Additionally to select multiple you need to add multiple attribute in your select.

Markup

<select ng-model="selectedValues" multiple>
    <option ng-repeat="option in options" value="{{option.value}}">{{option.name}}</option>
</select>
{{selectedValues}}

Solution 2

Just add the multiple attribute in the select field.

<div class="list">
    <label class="item item-input item-select">
   <div class="input-label">
       Lightsaber
   </div>
   <select multiple="multiple">
        <option>Blue</option>
        <option selected>Green</option>
        <option>Red</option>
   </select>
</label>

Solution 3

use ng-options to bind data, here is how

in the controller

$scope.values=  [
   {id:1, name:"value1" }, 
   {id:2, name:"value2" }, 
   {id:3, name:"value3" }
   ];
$scope.selectedValues= []; //initial selections

and in the view

<label class="item item-input item-select">

     <select multiple ng-model='selectedValues'
                    ng-options="a.name for a in values" >
     </select>
</label>
{{selectedValues}} <!-- to preview the selection -->