AngularJS中的表单简单入门


Posted in Javascript onJuly 28, 2016

AngularJS 表单

AngularJS 表单是输入控件的集合。

HTML 控件

以下 HTML input 元素被称为 HTML 控件:

input 元素
select 元素
button 元素
textarea 元素

HTML 表单

HTML 表单通常与 HTML 控件同时存在。

AngularJS 表单实例

First Name:

Last Name:
 

form = {"firstName":"John","lastName":"Doe"}

master = {"firstName":"John","lastName":"Doe"}

应用程序代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
 <form novalidate>
 First Name:<br>
 <input type="text" ng-model="user.firstName"><br>
 Last Name:<br>
 <input type="text" ng-model="user.lastName">
 <br><br>
 <button ng-click="reset()">RESET</button>
 </form>
 <p>form = {{user }}</p>
 <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
 $scope.master = {firstName:"John", lastName:"Doe"};
 $scope.reset = function() {
  $scope.user = angular.copy($scope.master);
 };
 $scope.reset();
});
</script>

</body>
</html>

运行结果:

First Name:

Last Name:
 

form = {"firstName":"John","lastName":"Doe"}

master = {"firstName":"John","lastName":"Doe"}

注意: novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

实例解析

ng-app 指令定义了 AngularJS 应用。

ng-controller 指令定义了应用控制器。

ng-model 指令绑定了两个 input 元素到模型的 user 对象。

formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。

reset() 方法设置了 user 对象等于 master 对象。

ng-click 指令调用了 reset() 方法,且在点击按钮时调用。

novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。

 以上就是对AngularJS 表单资料的整理,后续继续补充,希望能帮助编程的同学。

Javascript 相关文章推荐
基于JQuery的日期联动实现代码
Feb 24 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
angular简介和其特点介绍
Jan 29 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 #Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 #Javascript
AngularJS 模块详解及简单实例
Jul 28 #Javascript
jQuery制作网页版选项卡
Jul 28 #Javascript
AngularJS 中的事件详解
Jul 28 #Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 #Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 #Javascript
You might like
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
php微信公众号开发模式详解
2016/11/28 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
js星星评分效果
2014/07/24 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
python实现得到一个给定类的虚函数
2014/09/28 Python
Python itertools模块详解
2015/05/09 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
房屋继承公证书
2014/04/10 职场文书
志愿者活动总结范文
2014/04/26 职场文书
校园广播稿范文
2015/08/19 职场文书