8、angular的select
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>
