产品线 产品 版本 代码是联动关系
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);
}
?>