使用angular.js获取form表单中的信息
<!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表单中的信息的更多相关文章
- JS获取form表单数据
以下代码可放在一个js文件中,以便通用: //获取指定表单中指定标签对象 function getElements(formId, label) { var form = document.getEl ...
- JS 获取form表单的所有数据
在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为 ...
- 在 easyui中获取form表单中所有提交的数据 拼接到table列表中
form表单===== <!-- 并用药品填写信息弹框 --> <div id="usingProdctMsgDiv" style="display: ...
- jquery获取form表单中的内容,并将表单内容更新到datagrid的一行
//执行不刷新页面更新所修改的行 var arr = $('#patient_form').serializeArray();//将表单中的数据格式化成数组 var m = new Array(); ...
- (转载)php获取form表单中name相同的表单项
(转载)http://hi.baidu.com/ruhyxowwzhbqszq/item/5fd9c8b9b594db47ba0e12a9 比如下面的表单: /*form.php*/ <form ...
- JS获取form表单所有属性值
// 得到一个表单里的全部信息function getFormQueryString() { var frmID=document.forms[0]; var i,queryString=" ...
- js获取form表单所有数据
代码如下: <script type="text/javascript"> // 获取指定form中的所有的<input><select>对象 ...
- JS获取form表单的所有输入值
function getFormQueryString(frmID) { var frmID=document.getElementById(frmID); var i,queryString = & ...
- jquery获取form表单中的数据
$(function() { $('#submit').click(function() { var d = {}; var t = $('form').serializeArray(); //t的值 ...
随机推荐
- drf05 路由Routers
对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework提供了两个router ...
- [Java]链表的打印,反转与删除
class Node{ public int value; public Node next=null; public Node(int value) { this.value=value; } }p ...
- USACO 4.1 Fence Loops
Fence Loops The fences that surround Farmer Brown's collection of pastures have gotten out of contro ...
- pause、jobs、setitimer(2)、system v ipc(day12)
一.pause()的使用 #include <unistd.h> int pause(void); 功能:等待信号的到来 返回值: - 错误 errno被设置 只有在信号处理函数执行完毕的 ...
- (C/C++学习)2.C语言中文件流操作基本函数总结
函数所在头文件:stdio.h 说明:前半部分主要为对各个文件流操作函数的例举,后半部分着重于上机运行分析.文中部分引用自王桂林老师的C/C++课件. 1.FIELE *fopen(const cha ...
- Centos 7源码编译搭建Nginx
一.Nginx入门介绍 1. Nginx(engine x):[ˈendʒɪnks] 2. Nginx 是 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版 ...
- Bootstrap内联表单
有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<f ...
- phpcms v9 邓士鹏(石家庄职业技术学院)
头部标题.关键词.描述调用: <title>{if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title'] ...
- SpringCloud Config 分布式配置中心
一.分布式系统面临的问题---配置问题 微服务意味着要将单体应用中的业务拆分成一个个子服务,每个服务的粒度相对较小,因此系统中会出现大量服务.由于每个服务都需要必要的配置信息才能运行,所以一套集中式的 ...
- 通过fmt标签格式化el表达式中的日期、小数
首先引入fmt外部文件包 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" % ...