Question

https://jsfiddle.net/jzhang172/7c2zgkf0/1/

如何使用angularJS设置select的初始值？

var app = angular.module('myApp', []);

app.controller('carCtrl',function($scope){
$scope.cars={
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}

}

});

input.ng-invalid{
  background:red;
    transition:.4s;
}
input.ng-valid{
  background:#A3CBFF;
  transition:.4s;
}
input.ng-pending{
  border:1px solid red;
}
input{
    font-size: 30px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


<div ng-app="myApp" ng-controller="carCtrl" ng-init="selectCar='$scope.cars.car01'">
<p>
Please Select a Car
</p>
<select ng-model="selectCar" ng-options="x for (x,y) in cars" >

</select>
<span>Color: {{selectCar.color}}</span>
<span>Model: {{selectCar.model}}</span>
<span>Brand: {{selectCar.brand}}</span>
</div>

Answer 1

您可以使用ng-model

var app = angular.module('myApp', []);

app.controller('carCtrl',function($scope){

$scope.cars={
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}

}
$scope.initVal = $scope.cars['car01'];
});

<select ng-model="initVal"  ng-options="x for (x,y) in cars" >

Answer 2

您可以通过设置$scope.selectCar的值来设置初始值。这就是Angular将要考虑的地方。

您还可以添加类似

的内容

<option disabled selected>-- Select --</option>

如果您只想显示选择信息。

现在，如果您将$scope.selectCar设置为列表中的某个项目，例如：

$scope.selectCar = $scope.cars['car01'];

Angular会理解它是同一个对象并选择它。

但是如果它不是来自同一个父对象/列表，即使它具有相同的属性，AngularJS也不会知道它是同一个对象（因为JS中的对象比较是通过引用而不是值）并且不会选择它。

在这种情况下，您可以添加track by表达式。如果您在每个汽车对象中都有唯一的“id”属性（不必完全称为id），则可以将其附加到ng-options表达式：ng-options="blah blah ... in cars track by x.id"。

我有一篇非常详细的博客文章，介绍了您可能遇到的所有不同情况：

How to set the initial selected value of a select element using Angular.JS ng-options & track by

如果您使用Angular 1.4+使用track-by时遇到任何问题，或者只是想知道要使用哪个字段以便正确使用它，请参阅此帖子以获取帮助：

Using track by correctly with Angular 1.4 select ng-options – Why can’t I select this option?

让我知道它是怎么回事。

angularJS - nginit，如何获得范围

2 个答案: