1、數據源為數組
x?for?x?in?names
第一個x代表在下拉框內顯示的數據??第二個x指的是在names里數據<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
<title>Document</title>
<script?src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
????<div?ng-app="myApp"?ng-controller="myCtrl">??
????????<select?ng-model="selectName"?ng-options="x?for?x?in?names"></select>
????????1您選擇的是：{{selectName}}
????????
????????<select?ng-model="selectName1">
????????????<option?ng-repeat="x?in?names">{{x}}</option>
????????</select>
????????2您選擇的是{{selectName1}}
????</div>
</body>
</html>
<script>
var?app?=?angular.module('myApp',?[]);
app.controller('myCtrl',?function($scope)?{
????$scope.names=['zhang','wang','li']
});
</script>2、數據源為數組對象時
ng-options 選中的是一個對象
而repeat選中的是一個字符串
x.site?for?x?in?names
第一個x代表在下拉框內顯示的數據??要顯示url?就是?x.url?for?x?in?names
第二個為?{site?:?"Google",?url?:?"http://www.google.com"}對象<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
<title>Document</title>
<script?src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
????<div?ng-app="myApp"?ng-controller="myCtrl">??
????????<select?ng-model="selectName"?ng-options="x.site?for?x?in?names"></select>
????????1您選擇的是：{{selectName.site}}
????????2網址為{{selectName.url}}
????????
????????<select?ng-model="selectName1">
????????????<option?ng-repeat="x?in?names"?value="{{x.url}}">{{x.site}}</option>
????????</select>
????????2您選擇的是{{selectName1}}
????</div>
</body>
</html>
<script>
var?app?=?angular.module('myApp',?[]);
app.controller('myCtrl',?function($scope)?{
????$scope.names?=?[
????{site?:?"Google",?url?:?"http://www.google.com"},
????{site?:?"Runoob",?url?:?"http://www.runoob.com"},
????{site?:?"Taobao",?url?:?"http://www.taobao.com"}
????];
});
</script>?
3、數據源為json對象
ng-repeat選中的值和select顯示一樣
ng-options選中的value可以和select的顯示不同
<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
<title>Document</title>
<script?src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
????<div?ng-app="myApp"?ng-controller="myCtrl">??
????????<select?ng-model="selectName"?ng-options="?x?for?(x,?y)?in?names"></select>
????????1您選擇的是{{selectName}}
????????
????????<select?ng-model="selectName1">
????????<option?ng-repeat="x?in?names"?>{{x}}</option>
????????</select>
????????2您選擇的是{{selectName1}}
????</div>
</body>
</html>
<script>
var?app?=?angular.module('myApp',?[]);
app.controller('myCtrl',?function($scope)?{
????$scope.names?=?{
????site01?:?"Google",
????site02?:?"Runoob",
????site03?:?"Taobao"
????};
});
</script>3、數據源為json對象
選中的值得json對象?
{brand?:?"Ford",?model?:?"Mustang",?color?:?"red"}<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<script?src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div?ng-app="myApp"?ng-controller="myCtrl">
<p>選擇一輛車:</p>
<select?ng-model="selectedCar"?ng-options="x?for?(x,?y)?in?cars">
</select>
<h1>你選擇的是:?{{selectedCar.brand}}</h1>
<h2>模型:?{{selectedCar.model}}</h2>
<h3>顏色:?{{selectedCar.color}}</h3>
<p>注意選中的值是一個對象。</p>
</div>
<script>
var?app?=?angular.module('myApp',?[]);
app.controller('myCtrl',?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"}
????}
});
</script>
</body>
</html>4、設置初始值
var?app?=?angular.module('myApp',?[]);app.controller('myCtrl',?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.selectedCar?=?$scope.cars.car02;??//設置第2個為初始值；});5、
下拉框初始化無默認值，或者有空白選項，影響美觀，可通過以下方法調整：
-
?1.給定初始化信息（ng-init）
-
?2.隱藏空白選項（ng-show="false"）
<form>
??選擇一個選項:??
??<select?ng-model="myVar"?ng-init="myVar='tuts'">
????<option?ng-show="false"?value="">
????<option?value="dogs">Dogs????
????<option?value="tuts">Tutorials???
????<option?value="cars">Cars?
???</select>
</form>
?
