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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
js实现拖拽与碰撞检测
Sep 18 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
python实现学生管理系统
2018/01/11 Python
Python中按键来获取指定的值
2019/03/02 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
python和php哪个更适合写爬虫
2020/06/22 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
开服装店计划书
2014/08/15 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
2014国庆节标语口号
2014/09/19 职场文书
三严三实对照检查材料
2014/09/22 职场文书
四风对照检查材料范文
2014/09/27 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
孔子观后感
2015/06/08 职场文书
茶花女读书笔记
2015/06/29 职场文书
教师培训简讯
2015/07/20 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python