angularJS - nginit，如何获得范围

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.selectCar = $scope.cars['car01'];

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

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

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

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

如何使用Angular.JS ng-options和track by设置选择元素的初始选定值

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

正确使用Angular 1.4选择ng-options - 为什么我不能选择此选项？

让我知道事情的后续。