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 - 為什么我不能選擇此選項？

讓我知道事情的后續。