Question

这是我试图构建的选择的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填充，当我选择一个选项时，模型会更新。但是，选择保持重置，我不知道为什么。

这里是一名掠夺者： http://plnkr.co/edit/nEKP0xDhrdrIeDPml7Am?p=preview

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

Answer 1

在这种情况下，您最好使用带有options元素的ng-repeat

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

基本上不可能同时使用选择和跟踪

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

请勿在同一表达式中使用select as和track by。它们并非旨在协同工作。

如前所述，使用 country作为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

Answer 3

See the Angular documentation on ngOptions

注意：ngModel按引用进行比较，而不是值。绑定到对象数组时这很重要

使用country.code as country.name代替country as country.name，以便正确比较引用。

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

当然，您无法再直接使用country_code - 而是使用country_code.code（或重命名模型）。

但是，以非ajax方式提交表单会让我感到担忧。我不明白你为什么要那样做。

即使模型更新，选择也会保持重置

3 个答案: