angular $http 与form表单的select

产品线产品版本代码是联动关系

ng-model 绑定数据 设置默认值
ng-options 填充option
ng-change 选项变化时的操作
截图如下：

html

  1 <!DOCTYPE html>
  2 <html ng-app="a2_15">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  6     <meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  7     <title>使用指令复制元素</title>
  8     <style type="text/css">
  9         body {
 10             font-size: 14px;
 11         }
 12 
 13         ul {
 14             list-style-type: none;
 15             width: 400px;
 16         }
 17 
 18         ul li {
 19             float: left;
 20             padding: 5px;
 21         }
 22 
 23         ul li span {
 24             float: left;
 25             width: 50px
 26         }
 27     </style>
 28     <script src="js/angular.min.js"></script>
 29 
 30 </head>
 31 <body>
 32 
 33 <form name="temp_form" ng-controller="c2_15">
 34     <div>
 35         产品线:
 36         <select ng-model="a"
 37                 ng-options="v.id as v.name for v in a_data"
 38                 ng-change="a_change(a)">
 39             <option value="">--please select--</option>
 40         </select>
 41     </div>
 42 
 43     <div>
 44         产品:
 45         <select ng-model="b"
 46                 ng-options="v.id as v.name for v in b_data"
 47                 ng-change="b_change(b)">
 48             <option value="">--please select--</option>
 49         </select>
 50     </div>
 51 
 52     <div>
 53         版本:
 54         <select ng-model="c"
 55                 ng-options="v.id as v.name for v in c_data"
 56                 ng-change="c_change(c)">
 57             <option value="">--please select--</option>
 58         </select>
 59     </div>
 60 
 61     <div>
 62         代码:
 63         <select ng-model="d"
 64                 ng-options="v.id as v.name for v in d_data"
 65                 ng-change="d_change(d)">
 66             <option value="">--please select--</option>
 67         </select>
 68     </div>
 69 </form>
 70 
 71 <script type="text/javascript">
 72     var a2_15 = angular.module('a2_15', []);
 73     a2_15.controller('c2_15', ['$scope','$http', function ($scope, $http) {
 74         // 默认值
 75         $scope.a = "";
 76         $scope.b = "";
 77         $scope.c = "";
 78         $scope.d = "";
 79 
 80         // 填充选项
 81         // 填充a
 82         $http({
 83             method:'POST',
 84             url:'data/zz.php',
 85             params:{
 86                 id:"",
 87                 type:"pl"
 88             }
 89         }).success(function (data,status,headers,config) {
 90             $scope.a_data=data;
 91 
 92             // 填充b
 93             $http({
 94                 method:'POST',
 95                 url:'data/zz.php',
 96                 params:{
 97                     id:$scope.a_data[0].id,
 98                     type:"p"
 99                 }
100             }).success(function (data,status,headers,config) {
101                 $scope.b_data=data;
102 
103                 // 填充c
104                 $http({
105                     method:'POST',
106                     url:'data/zz.php',
107                     params:{
108                         id:$scope.b_data[0].id,
109                         type:"r"
110                     }
111                 }).success(function (data,status,headers,config) {
112                     $scope.c_data=data;
113 
114                     // 填充d
115                     $http({
116                         method:'POST',
117                         url:'data/zz.php',
118                         params:{
119                             id:$scope.c_data[0].id,
120                             type:"c"
121                         }
122                     }).success(function (data,status,headers,config) {
123                         $scope.d_data=data;
124                     });
125                 });
126             });
127         });
128 
129         // change监听
130         $scope.a_change=function (a) {
131             // 填充b
132             $http({
133                 method:'POST',
134                 url:'data/zz.php',
135                 params:{
136                     id:$scope.a,
137                     type:"p"
138                 }
139             }).success(function (data,status,headers,config) {
140                 $scope.b="";
141                 $scope.b_data=data;
142 
143                 // 填充c
144                 $http({
145                     method:'POST',
146                     url:'data/zz.php',
147                     params:{
148                         id:$scope.b_data[0].id,
149                         type:"r"
150                     }
151                 }).success(function (data,status,headers,config) {
152                     $scope.c="";
153                     $scope.c_data=data;
154 
155                     // 填充d
156                     $http({
157                         method:'POST',
158                         url:'data/zz.php',
159                         params:{
160                             id:$scope.c_data[0].id,
161                             type:"c"
162                         }
163                     }).success(function (data,status,headers,config) {
164                         $scope.d="";
165                         $scope.d_data=data;
166                     });
167                 });
168             });
169         };
170         $scope.b_change=function (b) {
171             // 填充c
172             $http({
173                 method:'POST',
174                 url:'data/zz.php',
175                 params:{
176                     id:$scope.b,
177                     type:"r"
178                 }
179             }).success(function (data,status,headers,config) {
180                 $scope.c="";
181                 $scope.c_data=data;
182 
183                 // 填充d
184                 $http({
185                     method:'POST',
186                     url:'data/zz.php',
187                     params:{
188                         id:$scope.c_data[0].id,
189                         type:"c"
190                     }
191                 }).success(function (data,status,headers,config) {
192                     $scope.d="";
193                     $scope.d_data=data;
194                 });
195             });
196         };
197         $scope.c_change=function (c) {
198             $http({
199                 method:'POST',
200                 url:'data/zz.php',
201                 params:{
202                     id:$scope.c,
203                     type:"c"
204                 }
205             }).success(function (data,status,headers,config) {
206                 $scope.d="";
207                 $scope.d_data=data;
208             });
209         };
210         $scope.d_change=function (d) {
211         }
212     }]);
213 
214 </script>
215 </body>
216 </html>

　　php

<?php
header("Content-Typent:text/json");

if($_GET["type"]=="pl"){
	$stulist=array(
		array('id'=>"1" ,'name'=>'产品线1' ),
		array('id'=>"2" ,'name'=>'产品线2' )
	);
	echo json_encode($stulist);
}else if($_GET["type"]=="p"){
	if($_GET["id"]=="1"){
		$stulist=array(
			array('id'=>"1" ,'name'=>'产品1' ),
			array('id'=>"2" ,'name'=>'产品2' )
		);
		echo json_encode($stulist);
	}else{
		$stulist=array(
			array('id'=>"1" ,'name'=>'产品3' ),
			array('id'=>"2" ,'name'=>'产品4' )
		);
		echo json_encode($stulist);
	}
}else if($_GET["type"]=="r"){
	if($_GET["id"]=="1"){
		$stulist=array(
			array('id'=>"1" ,'name'=>'版本1' ),
			array('id'=>"2" ,'name'=>'版本2' )
		);
		echo json_encode($stulist);
	}else{
		$stulist=array(
			array('id'=>"1" ,'name'=>'版本3' ),
			array('id'=>"2" ,'name'=>'版本4' )
		);
		echo json_encode($stulist);
	}
}else if($_GET["type"]=="c"){
	if($_GET["id"]=="1"){
		$stulist=array(
			array('id'=>"1" ,'name'=>'代码1' ),
			array('id'=>"2" ,'name'=>'代码2' )
		);
		echo json_encode($stulist);
	}else{
		$stulist=array(
			array('id'=>"1" ,'name'=>'代码3' ),
			array('id'=>"2" ,'name'=>'代码4' )
		);
		echo json_encode($stulist);
	}
}else{
	$stulist=array(
		array('id'=>"1" ,'name'=>'代码3' ),
		array('id'=>"2" ,'name'=>'代码4' )
	);
	echo json_encode($stulist);
}
?>