javascript - 在两个选择中设置默认值？

Question

我的选择有问题。这是代码:

 <select ng-model="car" ng-options="car.name for car in cars track by car.id" class="form-control">
    <option value="">Choose model name</option>
  </select>
  <br />
  <select ng-options="model.name for model in car.models track by model.id" ng-model="model" class="form-control">
    <option value="">Choose car</option>
  </select>

我希望当我访问此页面时，两个选择具有默认值。例如，第一次选择 - “BMW”，第二次选择 - “528I”。我正在尝试执行此解决方案:

<select ng-model="car" ng-init="car.id = 1" ng-options="car.name for car in cars track by car.id" class="form-control">
    <option value="">Choose model name</option>
  </select>
  <br />
  <select ng-init="model.id = 5" ng-options="model.name for model in car.models track by model.id" ng-model="model" class="form-control">
    <option value="">Choose car</option>
  </select>

但它仅适用于第一个选择。 (当我在第一个 select with name with id = 1 中选择名称时，第二个 select 切换到 id = 5 的模型；)

我不知道如何同时在两个选择中重新设置默认值。 你有什么想法吗？

这里是 plunker

Answer 1

你可以只使用 ng-init，像这样:

  <select ng-init="car=cars[0]" ng-model="car" ng-options="car.name for car in cars" class="form-control">
    <option value="">Choose model name</option>
  </select>
  <br />
  <select ng-init="model=car.models[0]" ng-options="model.name for model in car.modelsd" ng-model="model" class="form-control">
    <option value="">Choose car</option>
  </select>

更新

select 的语法有点偏离，实际上您不需要使用 track by 除非您对 select 的值进行分组，而您不是。我认为您真正想要的是将模型绑定(bind)到“汽车”的 id 而不是将模型绑定(bind)到汽车本身。如果那是你想要的，你可以这样做:

  <select ng-init="car=1" ng-model="car" ng-options="car.id as car.name for car in cars" class="form-control">
    <option value="">Choose model name</option>
  </select>

但是为了用汽车模型渲染第二个选择，你将不得不做一些非常尴尬的事情，因为在那种情况下你的变量 car 将是一个 int(汽车的 ID)，而不是“汽车”对象，因此您必须执行如下操作:

  <select ng-init="model=5" ng-model="model" ng-options="model.id as model.name for model in ((cars | filter:{id:car})[0].models)" class="form-control">
    <option value="">Choose car</option>
  </select>

这和它看起来一样笨拙，但如果那是你想要的......好吧，这里有一个例子:

Working example

在我看来，一个更好的想法是让模型指向对象，如果你想通过 id 初始化选择，你可以在 ng-初始化 :

  <select ng-init="car=(cars|filter:{id:1})[0]" ng-model="car" ng-options="car.name for car in cars" class="form-control">
    <option value="">Choose model name</option>
  </select>
  <br />
  <select ng-init="model=(car.models|filter:{id:5})[0]" ng-options="model.name for model in car.models" ng-model="model" class="form-control">
    <option value="">Choose car</option>
  </select>

Working Example