<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册</title>

    <script src="./node_modules/angular/angular.js"></script>

</head>

<body ng-app="s1.app">

<div>

    <div>

        <label for="ipt_name">用户名</label>

        <input ng-model="data.name" type="text" id="ipt_name">

        <span ng-bind="data.errorMsg.name"></span>

    </div>

    <div>

        <label for="ipt_password">密码</label>

        <input ng-model="data.password" type="password" id="ipt_password">

    </div>

    <div>

        <label for="ipt_age">年龄</label>

        <input ng-model="data.age" type="number" id="ipt_age">

    </div>

    <div>

        <label for="ipt_phone">手机</label>

        <input ng-model="data.phone" type="tel" id="ipt_phone">

    </div>

    <div>

        <button ng-click="actions.submit()">注册</button>

    </div>

</div>

<script>

    // app是application的缩写，application是应用程序的意思

    var app = angular.module('s1.app', []);

    app.run(function ($rootScope) {

        // data是数据的意思

        var data = $rootScope.data = {};

        data.name = '';

        data.password = '';

        data.age = 0;

        data.phone = '';

        data.errorMsg = {};

        // actions是行为的意思

        var actions = $rootScope.actions = {};

        actions.submit = function () {

            var userinfo = {};

            if(data.name == ''){

                data.errorMsg.name = '用户名不能为空';

                return;

            }

            userinfo.name = data.name;

            userinfo.password = data.password;

            userinfo.age = data.age;

            userinfo.phone = data.phone;

            // 从数据对象上拿到我们想要的数据，然后做提交（现在我们没有服务器，只是log一下）

            console.log(userinfo);

        }

    })

</script>

</body>

</html>

使用angular.js获取form表单中的信息的更多相关文章

  1. JS获取form表单数据

    以下代码可放在一个js文件中,以便通用: //获取指定表单中指定标签对象 function getElements(formId, label) { var form = document.getEl ...

  2. JS 获取form表单的所有数据

    在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为 ...

  3. 在 easyui中获取form表单中所有提交的数据 拼接到table列表中

    form表单===== <!-- 并用药品填写信息弹框 --> <div id="usingProdctMsgDiv" style="display: ...

  4. jquery获取form表单中的内容，并将表单内容更新到datagrid的一行

    //执行不刷新页面更新所修改的行 var arr = $('#patient_form').serializeArray();//将表单中的数据格式化成数组 var m = new Array(); ...

  5. （转载）php获取form表单中name相同的表单项

    (转载)http://hi.baidu.com/ruhyxowwzhbqszq/item/5fd9c8b9b594db47ba0e12a9 比如下面的表单: /*form.php*/ <form ...

  6. JS获取form表单所有属性值

    // 得到一个表单里的全部信息function getFormQueryString() { var frmID=document.forms[0]; var i,queryString=" ...

  7. js获取form表单所有数据

    代码如下: <script type="text/javascript"> // 获取指定form中的所有的<input><select>对象 ...

  8. JS获取form表单的所有输入值

    function getFormQueryString(frmID) { var frmID=document.getElementById(frmID); var i,queryString = & ...

  9. jquery获取form表单中的数据

    $(function() { $('#submit').click(function() { var d = {}; var t = $('form').serializeArray(); //t的值 ...

随机推荐

  1. Unity与Android通信的中间件

    2.1.1 Fragment和Activity都需要实现的接口——IBaseView/** * Description:Basic interface of all {@link Activity} ...

  2. 编写输出Hellow word！

    打开java运行环境(eclipse),然后输入以下语句,点击编译运行后即可输出“Hello World,”. public class HelloWorld { public static void ...

  3. JavaEE el表达式中三目运算符的使用

    也可以通过在bean对象中写getter方法通过对象.属性进行调用

  4. NOIP2012 DAY2 T2借教室

    题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们自然 ...

  5. ldap 基本名词解释（3）

    名词解释 Objectclass LDAP对象类,是LDAP内置的数据模型.每种objectClass有自己的数据结构,比如我们有一种叫“电话薄”的objectClass,肯定会内置很多属性(attr ...

  6. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

  7. OpenCV实现USM锐化与测试

    OpenCV实现USM锐化 [转]http://www.programdevelop.com/4964391/ USM (Unsharp masking) is a common operation ...

  8. 【习题 4-2 Uva201】Squares

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 注意那个星号的数量... 然后V x y的话,是从(y,x)向(y+1,x)连线. H x y才是从(x,y)向(x,y+1)连线 ...

  9. netty 拆包和粘包 (三)

    在tcp编程底层都有拆包和粘包的机制   拆包 当发送数据量过大时数据量会分多次发送 以前面helloWord代码为例 package com.liqiang.nettyTest2; public c ...

  10. Chromium多线程模型设计和实现分析

    Chromium除了远近闻名的多进程架构之外,它的多线程模型也相当引人注目的.Chromium的多进程架构是为了解决网页的稳定性问题,而多线程模型则是为了解决网页的卡顿问题.为了达到这个目的,Chro ...