<!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. 我们常用，却容易忽视——CSS的BFC（Block formatting contexts）

    BFC——一个我们容易忽视掉的布局神器 今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w ...

  2. OleDbDataReader快速数据读取方式

    查询得到OleDbDataReader后,有三种方式支持数据读取,如下: //方法一**速度中等 OleDbDataReader reader = command.ExecuteReader(); w ...

  3. Atomikos的使用过程中要注意的事

    在使用Atomikos过程中遇到的一些问题,以作记录: MySQL does not support TMJOIN MySQL does not allow for joining an existi ...

  4. 【hihocoder#1413】Rikka with String 后缀自动机 + 差分

    搞了一上午+接近一下午这个题,然后被屠了个稀烂,默默仰慕一晚上学会SAM的以及半天4道SAM的hxy大爷. 题目链接:http://hihocoder.com/problemset/problem/1 ...

  5. JSPatch 使用

    1.JSPatch 准备 地址:https://github.com/bang590/JSPatch 框架:libz.1.tbd , JavaScriptCore.framework 2.cocosp ...

  6. Xamarin.ios 基本控件

    .按钮 UIButton UIButton btn = new UIButton(); btn.Frame = ,,,); //按钮位置一件宽高 btn.SetTitle("Button&q ...

  7. C3P0连接池配置和实现详解

    一.配置 <c3p0-config> <default-config> <!--当连接池中的连接耗尽的时候c3p0一次同时获取的连接数.Default: 3 --> ...

  8. SharePoint Online 申请试用链接地址

    SharePoint Online 申请试用链接地址: https://products.office.com/en-us/business/compare-office-365-for-busine ...

  9. 红米2A高配刷机记录

    2014816 机型:红米2A高配版 设备型号:2014816 CPU:高通 线刷:fastboot平台 http://192.168.7.118/MesReports/Reports/Cutting ...

  10. PHPMailer < 5.2.18 - RCE EXP（Bash）

    #!/bin/bash# CVE-2016-10033 exploit by opsxcq# https://github.com/opsxcq/exploit-CVE-2016-10033echo ...