ios - | AngularJS (ng1)/TS/PhoneGap |在 iOS 上 <select> 会显示错误的选项，但模型包含正确的选项

Question

框架:Angular 1

平台:iOS

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

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

在 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 属于选择器类型:

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

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

最后像这样绑定(bind) View :

<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 中的选择器不会遇到这个问题。对这里发生的事情有点不知所措。默认情况下，没有选择任何内容，这会在列表中创建一种空白值，在按下 <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>

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