<!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. vs2015提示中文

    解决方案:   1.找到这个目录 C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework 进入 \v ...

  2. Python安装pywinauto时遇到error: The read operation timed out解决方法

    Python结合Pywinauto 进行 Windows UI 自动化,安装pywinauto时遇到的一些问题: 解决方法:很明显是链接超时国外网站你懂的V_P_N吧,直接通过报错信息的链接复制到浏览 ...

  3. 关系数据库—SQL学习笔记

    SQL的特点: 综合统一 高度非过程化(存取路径的选择以及SQL的操作过程由系统自动完成) 面向集合的操作方式,以同一种语法结构提供多种使用方法(可以在终端键盘上直接键入SQL命令对数据库进行操作,也 ...

  4. CodeForces - 274B Zero Tree

    http://codeforces.com/problemset/problem/274/B 题目大意: 给定你一颗树,每个点上有权值. 现在你每次取出这颗树的一颗子树(即点集和边集均是原图的子集的连 ...

  5. 【BZOJ-4726】Sabota？ 树形DP

    4726: [POI2017]Sabota? Time Limit: 20 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 128  Solved ...

  6. x509数字证书导入-然后删除自身

    这种程序的使用场景,需要给客户一个证书,但不能把证书直接给他让他安装,程序中需要用到给客户的私钥,但又不允许客户将这个证书再去授权给其它人. 重点并不是代码,是如何对用户隐藏需要添加的资源 ,以文本为 ...

  7. 关闭SELinux和iptables防火墙

    1.关闭SELinux: 编辑SELinux配置文件: [root@Redis selinux]# vim /etc/selinux/config 修改SELINUX配置项为disable SELIN ...

  8. PHP 进程详解

    .note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...

  9. (function($){...}) (jQuery)

    这里实际上是匿名函数 function(arg){...}这就定义了一个匿名函数,参数为arg 而调用函数 时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:(funct ...

  10. dom 节点篇---模块

    改写成如下代码: var creatTag=(function(){ //var count=5; var oUl=document.createElement('ul'); var oDiv=doc ...