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

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>

但它仅适用于第一个选择。 （当我在第一次选择名称时选择名称，名称为 id = 1，第二次选择切换到 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，除非您对选择的值进行分组，而您不是。我认为您真正想要的是将模型绑定到“汽车”的id，而不是将模型绑定到汽车本身。如果这是你想要的，你可以这样做：

  <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-init 中这样做：

  <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

Answer 2

您可以在控制器中使用 ng-model 属性并分配一个默认变量，例如

<div ng-controller="MyController" >
    <form>
        <select ng-model="myForm.car">
            <option value="nissan">Nissan</option>
            <option value="toyota">Toyota</option>
            <option value="fiat">Fiat</option>
        </select>
    </form>

    <div>
        {{myForm.car}}
    </div>
</div>

<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myForm = {};
                $scope.myForm.car  = "nissan";
            } );
</script>

jsbin

并浏览此链接，以便您了解 angularjs 中的表单处理： http://tutorials.jenkov.com/angularjs/forms.html