javascript - 更改 ng-model 时选择不更新

Question

我有这样的代码:

  <select ng-model="mode" ng-init="mode=10">
    <optgroup label="Serif">
      <option value="0">Normal</option>
      <option value="1">Bold</option>
      <option value="2">Italic</option>
      <option value="3">Bold Italic</option>
    </optgroup>
    <optgroup label="Sans">
      <option value="4">Normal</option>
      <option value="5">Bold</option>
      <option value="6">Italic</option>
      <option value="7">Bold Italic</option>
    </optgroup>
    <optgroup label="Script">
      <option value="8">Normal</option>
      <option value="9">Bold</option>
    </optgroup>
    <optgroup label="Fraktur">
      <option value="10">Normal</option>
      <option value="11">Bold</option>
    </optgroup>
    <optgroup label="Monospace">
      <option value="12">Normal</option>
    </optgroup>
    <optgroup label="Double-struck">
      <option value="13">Bold</option>
    </optgroup>
  </select>
  <label for="text">Input Text</label>
  <input id="text" ng-model="input"/>
  <div>
    Output: {{input|convert:mode}}
  </div>

模式范围值已更改，转换过滤器以模式 == 10 执行，但选择未更新它仍未选中。当范围变量更改时，如何修复要更新的选择？

这里是 code pen证明了问题。

Answer 1

由于选项值被视为string，您需要将ng-init 值设置为string，如下所示

<select ng-model="mode" ng-init="mode='10'">

DEMO