AngularJS select下拉框的使用

最新推荐文章于 2024-06-16 09:35:13 发布

zhuzongzhi856

最新推荐文章于 2024-06-16 09:35:13 发布

阅读量532

点赞数

分类专栏： Web 前端

Web 前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

http://www.cnblogs.com/wolf-sun/p/4614532.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Select Demo</title>
		<script type="text/javascript" src="js/angular.min.js" ></script>
	</head>
	
	<body ng-app="myApp" ng-controller="myCtrl">
		<!-- ng-options -->
		<!-- 数据源为数组 -->
		<select name="" ng-model="selectedCar" ng-options="car for car in Cars">
		</select>
		
		<!-- 数据源为对象数组 -->
		<select name="" ng-model="selectedSite" ng-options="site.site as site.site for site in Sites ">
		</select>
		
		<!-- 数据源为对象 -->
		<select name="" ng-model="selectedsite" ng-options="x for (x, y) in sites ">
		</select>
		
		<!-- 数据源为对象且数据源的属性值也为对象 -->
		<select name="" ng-model="selectedcar" ng-options="y.brand as y.brand for (x, y) in cars ">
		</select>
		
		<!-- 用对象的键-值作为选中的标签组 -->
		<select name="" ng-model="mycity" ng-options="city.name as city.name group by city.group for city in Cities ">
		</select>
		
		<br />
		<br />
		
		<!-- ng-repeat -->
		<!-- 数据源为数组 -->
		<select ng-model="selectedCar">
			<option ng-repeat="car in Cars">{{car}}</option>
		</select>
		<!-- 数据源为对象数组 -->
		<select ng-model="selectedSite">
			<option ng-repeat="site in Sites">{{site.site}}</option>
		</select>
		
		<script>
			var app = angular.module("myApp", [])
			.controller('myCtrl', function($scope) {
				//数组
				$scope.Cars = ['奔驰', '宝马', '三菱'];
				$scope.selectedCar = $scope.Cars[0];
				
				//对象数组
				$scope.Sites = [
				    {site : "Google", url : "http://www.google.com"},
				    {site : "Runoob", url : "http://www.runoob.com"},
				    {site : "Taobao", url : "http://www.taobao.com"}
				];
				$scope.selectedSite = $scope.Sites[0].site;
				
				//对象
				$scope.sites = {
				    site01 : "Google",
				    site02 : "Runoob",
				    site03 : "Taobao"
				};
				$scope.selectedsite = $scope.sites.site01;
				
				//数据源为对象且数据源的属性值也为对象
				$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.car01.brand;
			    
			    $scope.mycity = '北京';
            	$scope.Cities = [
	            	{ id: 1, name: '北京', group: '中国' },
	            	{ id: 2, name: '上海', group: '中国' },
	            	{ id: 3, name: '广州', group: '中国' },
	            	{ id: 4, name: '纽约', group: '美国' }
            	];
			});
			
		</script>
		
	</body>
</html>