产品线 产品 版本 代码是联动关系
ng-model 绑定数据 设置默认值
ng-options 填充option
ng-change 选项变化时的操作
截图如下：
html
<!DOCTYPE html>
<html ng-app="a2_15">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>使用指令复制元素</title>
<style type="text/css">
body {
font-size: 14px;
} ul {
list-style-type: none;
width: 400px;
} ul li {
float: left;
padding: 5px;
} ul li span {
float: left;
width: 50px
}
</style>
<script src="js/angular.min.js"></script> </head>
<body> <form name="temp_form" ng-controller="c2_15">
<div>
产品线:
<select ng-model="a"
ng-options="v.id as v.name for v in a_data"
ng-change="a_change(a)">
<option value="">--please select--</option>
</select>
</div> <div>
产品:
<select ng-model="b"
ng-options="v.id as v.name for v in b_data"
ng-change="b_change(b)">
<option value="">--please select--</option>
</select>
</div> <div>
版本:
<select ng-model="c"
ng-options="v.id as v.name for v in c_data"
ng-change="c_change(c)">
<option value="">--please select--</option>
</select>
</div> <div>
代码:
<select ng-model="d"
ng-options="v.id as v.name for v in d_data"
ng-change="d_change(d)">
<option value="">--please select--</option>
</select>
</div>
</form> <script type="text/javascript">
var a2_15 = angular.module('a2_15', []);
a2_15.controller('c2_15', ['$scope','$http', function ($scope, $http) {
// 默认值
$scope.a = "";
$scope.b = "";
$scope.c = "";
$scope.d = ""; // 填充选项
// 填充a
$http({
method:'POST',
url:'data/zz.php',
params:{
id:"",
type:"pl"
}
}).success(function (data,status,headers,config) {
$scope.a_data=data; // 填充b
$http({
method:'POST',
url:'data/zz.php',
params:{
id:$scope.a_data[0].id,
type:"p"
}
}).success(function (data,status,headers,config) {
$scope.b_data=data; // 填充c
$http({
method:'POST',
url:'data/zz.php',
params:{
id:$scope.b_data[0].id,
type:"r"
}
}).success(function (data,status,headers,config) {
$scope.c_data=data; // 填充d
$http({
method:'POST',
url:'data/zz.php',
params:{
id:$scope.c_data[0].id,
type:"c"
}
}).success(function (data,status,headers,config) {
$scope.d_data=data;
});
});
});
}); // change监听
$scope.a_change=function (a) {
// 填充b
$http({
method:'POST',
url:'data/zz.php',
params:{
id:$scope.a,
type:"p"
}
}).success(function (data,status,headers,config) {
$scope.b="";
$scope.b_data=data; // 填充c
$http({
method:'POST',
url:'data/zz.php',
params:{
id:$scope.b_data[0].id,
type:"r"
}
}).success(function (data,status,headers,config) {
$scope.c="";
$scope.c_data=data; // 填充d
$http({
method:'POST',
url:'data/zz.php',
params:{
id:$scope.c_data[0].id,
type:"c"
}
}).success(function (data,status,headers,config) {
$scope.d="";
$scope.d_data=data;
});
});
});
};
$scope.b_change=function (b) {
// 填充c
$http({
method:'POST',
url:'data/zz.php',
params:{
id:$scope.b,
type:"r"
}
}).success(function (data,status,headers,config) {
$scope.c="";
$scope.c_data=data; // 填充d
$http({
method:'POST',
url:'data/zz.php',
params:{
id:$scope.c_data[0].id,
type:"c"
}
}).success(function (data,status,headers,config) {
$scope.d="";
$scope.d_data=data;
});
});
};
$scope.c_change=function (c) {
$http({
method:'POST',
url:'data/zz.php',
params:{
id:$scope.c,
type:"c"
}
}).success(function (data,status,headers,config) {
$scope.d="";
$scope.d_data=data;
});
};
$scope.d_change=function (d) {
}
}]); </script>
</body>
</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);
}
?>