<!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. iOS常用开发技巧

    iOS开发过程中,总有那么一些个小问题让人纠结,它们不会让程序崩溃,但是会让人崩溃.除此之外,还将分享一些细节现在我通过自己的总结以及从其他地方的引用,来总结一下一些常见小问题. 本篇长期更新,多积累 ...

  2. 【codeforces 148D】 Bag of mice

    http://codeforces.com/problemset/problem/148/D (题目链接) 题意 包中有w个白鼠,b个黑鼠.公主和龙轮流画老鼠,公主先画,谁先画到白鼠谁就赢.龙每画完一 ...

  3. PHP中explode和implode的区别

    字符串的连接与分割是非常重要的两个内容,通过其可以将数组按照指定的规则转换成字符串,也可以将字符串按照指定的规则进行分割,返回一个数组.其应用范围很广,如在购物网站的购物车,在线投票系统等.这两项技术 ...

  4. tensorflow学习

    tensorflow安装时遇到gcc: error trying to exec 'as': execvp: No such file or directory. 截止到2016年11月13号,源码编 ...

  5. 【CVE-2016-10009】OpenSSH < 7.4 - agent Protocol Arbitrary Library Loading

    粗看了一下,发现这个漏洞还是比较鸡肋的.如果前提条件满足,该漏洞可以在ssh server执行任意指令.不过前提是:1.攻击者可以往受害者磁盘上写文件.

  6. Python:eval的妙用和滥用

    时间 2014-07-08 13:05:24 CSDN博客 原文  http://blog.csdn.net/zhanh1218/article/details/37562167 主题 Python ...

  7. Nginx笔记

    基础篇 关于Nginx Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.最早由俄罗斯的程序设计师Igor Sysoev所开发,并在一个BSD-like ...

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

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

  9. IOS开发遇到（null）与<null>轻松处理

    在ios开发中不可避免的我们会遇到服务器返回的值有空值,但是如果是nil也就算了还可能得到(null)以及<null>的返回值,该如何处理呢?(当然有的字典转模型中已处理,可以通过遍历等) ...

  10. 使用powershell批量添加Keil和IAR的头文件路径

    在Keil和IAR的工程中,为了使文件结构清晰,通常会设置很多的子文件夹,然后将头文件和源文件放在不同的子文件夹中,这样就需要手动添加这些头文件夹的路径.当工程结构非常复杂时,文件夹的数量就非常多,特 ...