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 相关文章推荐
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
jQuery实现滚动效果
Nov 17 jQuery
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
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下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
利用python画一颗心的方法示例
2017/01/31 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Python 下载及安装详细步骤
2019/11/04 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
关于python中的xpath解析定位
2020/03/06 Python
python如何代码集体右移
2020/07/20 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
九年级化学教学反思
2016/02/22 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript