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>

但它仅适用于fisrt选择。（当我在第一个选择名称时选择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为汽车），而不是＆＃39;汽车＆＃39;对象，所以你必须做这样的事情：

  <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

设置两个选择的默认值？

2 个答案:

更新

Working example

Working Example