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

Question

框架：Angular 1

平台：iOS

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

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

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

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