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实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
javascript新手语法小结
Jun 15 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
js 深拷贝函数
2008/12/04 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
vuex存储token示例
2019/11/11 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python中import reload __import__的区别详解
2017/10/16 Python
Python统计单词出现的次数
2018/04/04 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python按比例随机切分数据的实现
2019/07/11 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
高中校园广播稿
2014/01/11 职场文书
升学宴家长致辞
2015/07/27 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
vue实力踩坑之push当前页无效
2022/04/10 Vue.js
nginx之内存池的实现
2022/06/28 Servers