<!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. 关于javascript的运动教程

    一.javascript的匀速运动 关于物体的javascript匀速运动要点分析: 1.物体关于运动的时候,我们要打开定时器 2.打开定时器的时候我们记得要在停止的时候关闭定时器,同时应该注意的是一 ...

  2. css 使图片水平垂直居中

    1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...

  3. bitset用法总结

    b.any() b中是否存在置为1的二进制位? b.none() b中不存在置为1的二进制位吗? b.count() b中置为1的二进制位的个数 b.size() b中二进制位的个数 b[pos] 访 ...

  4. (转)C# Enum,Int,String的互相转换 枚举转换

    Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举. 注意:枚举类型的基 ...

  5. fastclick 源码注解及一些基础知识点

    在移动端,网页上的点击穿透问题导致了非常糟糕的用户体验.那么该如何解决这个问题呢? 问题产生的原因 移动端浏览器的点击事件存在300ms的延迟执行,这个延迟是由于移动端需要通过在这个时间段用户是否两次 ...

  6. docker develop django

    $ docker pull django $ docker run -it -v $(pwd):/usr/src/app -p 8000:8000 django /bin/bash

  7. oracle--存储过程--bai

    --1 无入参最简单的存储过程 create or replace procedure hello_proc as v_name varchar2(20); v_age number; begin v ...

  8. supermap布局设定地图网格及布局网格

    地图网格设定 LayoutElements elements = m_mapLayoutControl.MapLayout.Elements; //构造GeoMap GeoMap geoMap = n ...

  9. Swift_提醒框

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Menlo; color: #ffffff } p.p2 { margin: 0.0px 0. ...

  10. 移动web页面前端开发总结

    移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的 ...