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 序列化对象实现代码
Dec 18 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
js的回调函数详解
Jan 05 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 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
深入PHP FTP类的详解
2013/06/13 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
IE下js调试工具Companion.JS
2010/10/15 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
深入研究React中setState源码
2017/11/17 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
从零学Python之入门(四)运算
2014/05/27 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
研究生毕业鉴定
2014/01/29 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
档案保密承诺书
2014/06/03 职场文书
学生干部培训方案
2014/06/12 职场文书
土地租赁协议书
2015/01/29 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
大学军训心得体会800字
2016/01/11 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
微信小程序实现轮播图指示器
2022/06/25 Javascript