<!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;

        });

        // 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.c = "";

                $scope.d = "";

                $scope.b_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.d = "";

                $scope.c_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>

angular $http 与form表单的select-->refine的更多相关文章

  1. React 之form表单、select、textarea、checkbox使用

    1.案例如下 import React from 'react'; /** * 非约束性组(类似defaultValue等属性,不可以程序修改): <input type="text& ...

  2. 前端 HTML form表单标签 select标签 option 下拉框

    <select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...

  3. angular $http 与form表单的select

    产品线 产品 版本 代码是联动关系 ng-model 绑定数据 设置默认值 ng-options 填充option ng-change 选项变化时的操作截图如下: html <!DOCTYPE ...

  4. form表单select联动

    下拉列表:二级联动菜单 Select对象的常用属性 options[]:返回所有option组成的一个数组: name:名称 value:option的value的值 length:设置或读取opti ...

  5. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  6. select标签 禁止选择但又能通过序列化form表单传值到后台

    前言 项目开发中,我们可能会碰到这样的需求:select标签,禁止选择但又能通过序列化form表单传值到后台,但是当我们使用disabled="disabled"时发现,无法序列化 ...

  7. select发生改变使用js提交form表单（get传值）

    form表单如下: <form id="my_form" method="get" action=""> <input t ...

  8. form表单提交，后台怎么获取select的值？后台直接获取即可，和input方式一样。

    form表单提交,后台怎么获取select的值? 后台直接获取即可,和后台获取input的值方式一样. form提交后,后台直接根据select的name获取即可,即getPara("XXX ...

  9. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  10. Form 表单提交参数

    今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...

随机推荐

  1. Servlet中以HashMap存放临时变量，解决跳转新页面请求参数过多时浏览器地址栏超长

    具体使用方法如下: 1.在跳转之前将需要的参数串encodeURIComponent后作为参数value,UUID作为key一起POST到Servlet保存到HashMap中: 2.在Servlet发 ...

  2. 使用Eclipse进行远程调试

    转自:http://blog.csdn.net/sunyujia/article/details/2614614 今天决定做件有意义的事,写篇图文并茂的blog,为什么要图文并茂?因为很多事可能用语言 ...

  3. 【转】OpenGL多线程创建纹理，附加我的测试结果

    原文地址 http://www.cnblogs.com/mazhenyu/archive/2010/04/29/1724190.html 关于这个问题以前只知道多个线程不能同时使用一个RC,结果为了能 ...

  4. bzoj3181: [Coci2012]BROJ

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...

  5. MySQL、MongoDB、Redis数据库Docker镜像制作

    MySQL.MongoDB.Redis数据库Docker镜像制作 在多台主机上进行数据库部署时,如果使用传统的MySQL的交互式的安装方式将会重复很多遍.如果做成镜像,那么我们只需要make once ...

  6. 将文件移出版本控制 (Revision Control)

    两条重要的 Git 命令: git rm -r -n --cached /path/to/the/directory git rm -r --cached /path/to/the/directory ...

  7. Theano Graph Structure

    Graph Structure Graph Definition theano's symbolic mathematical computation, which is composed of: A ...

  8. 利用BitMap进行大数据排序去重

    1.问题 问题提出: M(如10亿)个int整数,只有其中N个数重复出现过,读取到内存中并将重复的整数删除. 2.解决方案 问题分析: 我们肯定会先想到在计算机内存中开辟M个int整型数据数组,来on ...

  9. 学习篇：TypeCodes的2015年博客升级记

    原文: https://typecodes.com/mix/2015updateblog.html 2015年博客升级记 作者:vfhky | 时间:2015-05-23 17:25 | 分类:mix ...

  10. 共有31款PHP 图形/图像处理开源软件（转）

    详情点击:http://www.oschina.net/project/lang/22/php?tag=141&os=0&sort=view PHP 图像处理库 Grafika Gra ...