master

分支 (1)

管理

管理

master

anjular
/
index.html

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="angular-1.0.1.min.js" ></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<style>
		select{height:30px;border:1px solid #999}
		.box{
			margin:auto;
			width:800px;
		}
		option{height: 30px; min-height: 3em;}
	</style>
	<body>
		<div  class="box" ng-controller="Mycon">
			<div>
			  选择省0000000100000011：
			  <select ng-model="your.province" ng-options="v.name for v in chinaCities">
			  	<option value="">请选择</option>
			  </select>
			  选择市：
			  <select ng-model="your.city" ng-options="v.name for v in your.province.sub">
			  	<option value="">请选择</option>
			  </select>
			  选择区：
			  <select ng-model="your.area" ng-options="v.name for v in your.city.sub">
			  <option value="">请选择</option>
			  </select>
			</div><h4 id="add"></h4>
			<h4><button ng-click="toggle()">提交地址</button></h4>
		</div>
		<script>
			var app=angular.module('myApp', []);
			app.controller('Mycon',function($http,$scope){
				$scope.your = {
					province: '',
				};
				$http.get("json.js").success(function(data){
					$scope.chinaCities=data;
					$scope.your.province = $scope.chinaCities;
					$scope.your.city = $scope.your.province;
					$scope.your.area = $scope.your.city;
					console.log(data);
					$scope.toggle = function() {
						if($scope.your.province.name==null || $scope.your.city.name==null ){
							alert("请选择完整的地区");
						}else{
				        alert($scope.your.province.name+" "+$scope.your.city.name+" "+$scope.your.area.name)
						}
				    };
				})
			});
		</script>
	</body>
</html>