angularJS - nginit，如何获得范围

Question

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

How do I set the initial value of select with angularJS?

 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

you can use 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

You set the initial value by setting the value of $scope.selectCar . That's where Angular will look into.

You can also add something like

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

If you just want to show a selection message.

.

Now, if you set $scope.selectCar to some item in the list, like:

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

Angular will understand it's the same object and select it.

But if it's not from the same parent object / list, even if it has the same properties, AngularJS will NOT know it's the same object (because object comparison in JS is by reference not by value) and will not select it.

In this case you can add a track by expression. If you have a unique "id" property in each car object (doesn't have to be exactly called id ), you can append this to your ng-options expression: ng-options="blah blah ... in cars track by x.id" .

I have a very detailed blog post about all the different situations you might have with this:

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

If you have any problems using track-by using Angular 1.4+, or just want to know which field to use so that you are using it correctly, see this post for help as well:

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

Let me know how it goes.