| AngularJS (ng1) / TS / PhoneGap | on iOS <select> 将显示错误的选项，但模型包含正确的选项

Question

框架：Angular 1

平台：iOS

当在 iOS 上使用 <select> 时，一旦选择一个 <option>，视图将显示列表中的下一个 <option>，而模型将包含正确的值。

如果我们再次按下，视图显示的选项将显示为当前 select 选项。选择单独的选项时，视图和模型似乎正确对齐。

在 TS 中创建数组：

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 的类型为 Selector:

interface Option {
    Id: number;
    Value: string;
}
class Selector {
    Options: Array<Option>
    Selected: Option;

    constructor() {
        this.Options = [];
    }
}

最后视图绑定如下：

<select ng-model="ctrl.HairOptions.Selected"
        ng-options="option.Value for option in ctrl.HairOptions.Options track by option.Id"
        class="lg-select">
</select>

出现在浏览器和 Android 中的选择器不会遇到这个问题。对这里发生的事情有点不知所措。默认情况下，没有 selected 会在列表中创建一种空白值，第二次按 <select> 时该值不会出现。我认为这是毒药，但不确定补救措施。

Answer 1

考虑添加空选项：¹

<select ng-model="ctrl.HairOptions.Selected"
        ng-options="option.Value for option in ctrl.HairOptions.Options track by option.Id"
        class="lg-select">
     <option value="" disabled>Select HairOption...</option>
</select>

那么空白值不会被添加和删除。

| AngularJS (ng1) / TS / PhoneGap | on iOS <select> 将显示错误的选项，但模型包含正确的选项

| AngularJS (ng1) / TS / PhoneGap | on iOS <select> will display the wrong option, but model contains correct option

ios

angularjs

cordova

typescript

phonegap