Select 即使模型更新，也会不断重置

Question

这是我正在尝试构建的 select 的 html。

<select
  class="form-control"
  ng-options="country.code as country.name for country in countries track by country.code"
  ng-model="country_code"
  name="country_code">
</select>

select 填充，当我选择一个选项时，模型会更新。但是，select 一直在重置，我不确定为什么。

这是一个笨蛋： http://plnkr.co/edit/nEKP0xDhrdrIeDPml7Am?p=preview

我需要 track by 的原因是我正在构建一个将以老式的非 ajax 方式提交的表单。

Answer 1

在那种情况下，您最好将 ng-repeat 与 options 元素一起使用

http://plnkr.co/edit/yYysAHs6Ks5cCY4ZMjyg?p=preview

<select
      class="form-control"
      ng-model="country_code"
      name="country_code">
      <option value="{{country.code}}" ng-repeat="country in countries track by country.code">{{country.name}}</option>
</select>
        {{country_code}}

Answer 2

See the Angular documentation on ngOptions

Note: ngModel compares by reference, not value. This is important when binding to an array of objects

而不是 country.code as country.name，使用 country as country.name 以便正确比较参考。

http://plnkr.co/edit/Na2tIMDLxVS19jnsU4kE?p=preview

当然，您不能再直接使用 country_code——而是使用 country_code.code（或像我一样重命名模型）。

不过，您以非 ajax 方式提交表单让我担心。我不明白你为什么要那样做。

Answer 3

基本上 select as 和 track by 一起使用是不可能的

来自 ngOptions 文档：https://docs.angularjs.org/api/ng/directive/ngOptions

Do not use select as and track by in the same expression. They are not designed to work together.

如前所述，使用 use country as country.name.

<body ng-app="app">
<h1>Hello Plunker!</h1>
<select
  class="form-control"
  ng-options="country as country.name for country in countries track by country.code"
  ng-model="country_code"
  name="country_code">
    </select>
    {{country_code.code}}
 </body>

http://plnkr.co/edit/xa3XtyMwfJjqvCKmjCvo?p=preview

Select 即使模型更新，也会不断重置

Select keeps resetting even though model updates

angularjs

ng-options