angular $http 与form表单的select
产品线 产品 版本 代码是联动关系
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);
}
?>
angular $http 与form表单的select的更多相关文章
- React 之form表单、select、textarea、checkbox使用
1.案例如下 import React from 'react'; /** * 非约束性组(类似defaultValue等属性,不可以程序修改): <input type="text& ...
- 前端 HTML form表单标签 select标签 option 下拉框
<select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...
- form表单select联动
下拉列表:二级联动菜单 Select对象的常用属性 options[]:返回所有option组成的一个数组: name:名称 value:option的value的值 length:设置或读取opti ...
- [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁止选择但又能通过序列化form表单传值到后台,但是当我们使用disabled="disabled"时发现,无法序列化 ...
- select发生改变使用js提交form表单（get传值）
form表单如下: <form id="my_form" method="get" action=""> <input t ...
- form表单提交，后台怎么获取select的值？后台直接获取即可，和input方式一样。
form表单提交,后台怎么获取select的值? 后台直接获取即可,和后台获取input的值方式一样. form提交后,后台直接根据select的name获取即可,即getPara("XXX ...
- form表单验证-Javascript
Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...
- Form 表单提交参数
今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...
随机推荐
- 跟我从零基础学习Unity3D开发--NGUI入门基础
英雄联盟(撸啊撸) QQ飞车 魔兽世界等等相信大家都玩过游戏吧,玩过那UI知道是什么吧?UI可能说得有点专业的话那么游戏中那些属性面板例如: 现在对UI有一定认识了吧!回想一下您玩过的游戏就一定知道什 ...
- SQLite剖析之事务处理技术
前言 事务处理是DBMS中最关键的技术,对SQLite也一样,它涉及到并发控制,以及故障恢复等等.在数据库中使用事务可以保证数据的统一和完整性,同时也可以提高效率.假设需要在一张表内一次插入20个人的 ...
- Flyme适配源码更新命令,轻松完成打包
第一次已经同步了所有源码(花了很长时间),第一次已经连接手机进行了插桩和解reject,那么第二次还需要这么麻烦吗?答案是:NO ! 1.官方源码,执行如下命令可以实现: repo sync -c 2 ...
- 【Beta】Scrum03
Info 时间:2016.12.01 21:30 时长:15min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.12.04 21:30 Task Report Name ...
- BZOJ 4568 幸运数字
题目传送门 4568: [Scoi2016]幸运数字 Time Limit: 60 Sec Memory Limit: 256 MB Description A 国共有 n 座城市,这些城市由 n-1 ...
- 如何用java自带的工具生成证书
一.keytool的概念 keytool 是个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.在 ...
- 图解JVM的类加载机制(详细版)
注:本文为作者整理和原创,如有转载,请注明出处. 上一篇博文,把JAVA中的Class文件格式用图形的方式画了一下,逻辑感觉清晰多了,同时,也为以后查阅的方便. Class文件只是一种静态格式的二进制 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- json 对象 字符串 转换
json字符串转json对象:jQuery.parseJSON(jsonStr); json对象转json字符串:JSON.stringify(jsonObj);
- 【URLDecoder】java.lang.IllegalArgumentException: URLDecoder: Illegal hex characters in es
Java调用 URLDecoder.decode(str, "UTF-8"); 抛出以上的异常,其主要原因是% 在URL中是特殊字符,需要特殊转义一下, 上面的字符串中'%'是一个 ...