framework: Angular 1
platform: iOS
On iOS, using a <select> element will cause the view to display the next <option> in the list once one is chosen, while the model will contain the correct value.
If the <select> element is pressed again, the option that the view was showing will be presented as the currently selected option. When selecting a different option, the view and the model seem to align correctly.
Creating Arrays in TypeScript:
ConfigureHairOptions() {
this.HairOptions.Options.push({ Id: 0, Value: "Blonde" });
this.HairOptions.Options.push({ Id: 1, Value: "Black" });
this.HairOptions.Options.push({ Id: 2, Value: "Red" });
this.HairOptions.Options.push({ Id: 3, Value: "Gray" });
this.HairOptions.Options.push({ Id: 4, Value: "White" });
this.HairOptions.Options.push({ Id: 5, Value: "Bald" });
this.HairOptions.Options.push({ Id: 6, Value: "Brown" });
this.HairOptions.Options.push({ Id: 7, Value: "Sdy" });
}
HairOptions is of type Selector:
interface Option {
Id: number;
Value: string;
}
class Selector {
Options: Array<Option>
Selected: Option;
constructor() {
this.Options = [];
}
}
The views are bound like this:
<select ng-model="ctrl.HairOptions.Selected"
ng-options="option.Value for option in ctrl.HairOptions.Options track by option.Id"
class="lg-select">
</select>
The pickers that appear in browser and Android do not have this issue. I am not sure what is causing this problem on iOS. By default, nothing is selected which creates a blank value in the list, but this is not present when pressing the <select> element a second time. I suspect this is due to the platform, but I am unsure of the solution.