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 相关文章推荐
js中生成map对象的方法
Jan 09 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
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
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
python已协程方式处理任务实现过程
2019/12/27 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
python能做哪方面的工作
2020/06/15 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
SQL数据库笔试题
2016/03/08 面试题
《骆驼和羊》教学反思
2014/02/27 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
银行求职自荐书
2014/06/25 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
经理助理岗位职责
2015/02/02 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers