<!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. sql server安装出现的一点小问题

  2. 【剑指Offer】22、从上往下打印二叉树

      题目描述:   从上往下打印出二叉树的每个节点,同层节点从左至右打印.   解题思路:   本题实际上就是二叉树的层次遍历,深度遍历可以用递归或者栈,而层次遍历很明显应该使用队列.同样我们可以通过 ...

  3. [kernel]----理解kswapd的低水位min_free_kbytes

    1. min_free_kbytes 先看官方解释: This is used to force the Linux VM to keep a minimum number of kilobytes ...

  4. 编写 Shell 脚本的最佳实践

    转自:http://kb.cnblogs.com/page/574767/ 前言 由于工作需要,最近重新开始拾掇shell脚本.虽然绝大部分命令自己平时也经常使用,但是在写成脚本的时候总觉得写的很难看 ...

  5. SBC37x交叉编译平台QT+OPENCV【2】虚拟机Vbox下Ubuntu的磁盘扩容

    虚拟机Vbox下Ubuntu,当初为了学习,仅仅分配了8g,结果qt,opencv等一上,就说room空间不够了.于是开始折腾磁盘扩容. 网上一大堆,也不知道有多少是自己动手走过,正是不但浪费别人时间 ...

  6. 部署项目到tomcat时 访问项目404的问题总结

    使用tomcat服务器运行项目之前  需要把项目发布到(部署)tomcat上,然后启动服务器  运行项目 今天把以往正常运行的项目发布之后,运行时   竟然出现404  关键还不是我路径写错了   而 ...

  7. CodeForces 551E GukiZ and GukiZiana

    GukiZ and GukiZiana Time Limit: 10000ms Memory Limit: 262144KB This problem will be judged on CodeFo ...

  8. [bzoj2049][Sdoi2008]Cave 洞穴勘测_LCT

    Cave 洞穴勘测 bzoj-2049 Sdoi-2008 题目大意:维护一个数据结构,支持森林中加边,删边,求两点连通性.n个点,m个操作. 注释:$1\le n\le 10^4$,$1\le m\ ...

  9. 洛谷—— P2690 接苹果

    https://www.luogu.org/problem/show?pid=2690 题目背景 USACO 题目描述 很少有人知道奶牛爱吃苹果.农夫约翰的农场上有两棵苹果树(编号为1和2), 每一棵 ...

  10. 洛谷 P1535 游荡的奶牛

    P1535 游荡的奶牛 题目描述 Searching for the very best grass, the cows are travelling about the pasture which ...