CODEWITHSUNDEEP
iosangularjsjsonionic-frameworkdrop-down-menu
noor
noor

Reputation: 681

Ionic drop down IOS

I have the following json

[{"name":"Male","code":"1"},{"name":"Female","code":"2"}]

<label id="labelPersonalInformationExtra" class="item item-input item-stacked-label">
    <span id="inputLabel" class="input-label">Gender</span>
    <select id="dropDownPersonalDetails"  ng-options="gender.name for gender in genders"  ng-model="gender" ng-change="updateGender(gender)"  >
    <option  style="display:none;" value="" disabled>{{genderPlaceholder}}</option>
    </select>
    </label>

What I wanted to do is have the placeholder to show the last option they chose but what happens is that the value becomes duplicated. If their last selected choice was female. The drop down would show as:

How do I point their selected value to a value in my json so the drop down shows directly that.

Upvotes: 1

Views: 444

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Added option for placeholder will remain as is, you can't remove it dynamically. I'd rather prefer to give a generic text to placeholder of select like Select a gender. And then for preselected Female option you could do $scope.gender = $scope.genders[1] inside your controller.

Markup

<label id="labelPersonalInformationExtra" 
  class="item item-input item-stacked-label">
    <span id="inputLabel" class="input-label">Gender</span>
    <select id="dropDownPersonalDetails" ng-model="gender" 
       ng-change="updateGender(gender)"
       ng-options="gender.name for gender in genders">
       <option value="" disabled>Select a gender</option>
    </select>
</label>

Demo Plunker

Upvotes: 2

Related Questions