实践中学习AngularJS表单


Posted in Javascript onMarch 21, 2016

表单是最常用的一种组建。在Angular.js中,其实并没有单独的为表单添加多少特殊功能。但是,利用Angular.js框架本身的特点,可以更友好的呈现表单。下面将介绍几种常用的功能在Angular中是如何巧妙实现的。

1.根据输入域数据实时更新输出数据

下面代吗实现了一个简易的计算表单,它能将用户输入的数据进行处理,并且实时显示在表单输出域中:

<div ng-app="" ng-init="quantity=1;price=5"> 
数量: <input type="number" ng-model="quantity"> 
价格: <input type="number" ng-model="price"> 
<p><b>总价:</b> {{ quantity * price }}</p> 
</div>

通过定义两个ng-model,将用户输入的数据进行实时监听,并且利用{{}}进行数据的调用,拥几行代码就完成了一个建议的计算表单功能。

2.实现表单重置功能

下面的代码实现了一个表单中经常使用的功能:重置表单。

HTML代码:

<div ng-app="myApp" ng-controller="formCtrl"> 
<form> 
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> 
</div>

JS代码:

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(); 
});

在JS控制器代码中,我们定义了master对象,用来存放初始时刻表单输入框的值。我们定义了一个reset()方法,该方法执行后,利用angular.copy方法,将master中的值赋值给user,利用这样的方法实现了表单域的重置。在HTML代码中,我们使用ng-click鼠标点击事件触发reset()函数,从而实现我们的功能。

3.实现表单下拉菜单选择域功能

在Angular中,实现下拉菜单很简单。我们可以利用ng-repeat指令来方便的实现一个下拉菜单:

首先,在js的模型中定义数据,数据格式如下:

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
$scope.names = ["Google", "Runoob", "Taobao"]; 
});

然后,我们在html中,利用ng-repeat进行模型中数据的读取(具体含义见之前博客)

<div ng-app="myApp" ng-controller="myCtrl"> 
<select ng-model="selectedName" ng-options="x for x in names"> 
</select> 
</div>

关于下拉菜单,还涉及到从数据库、远程等读取数据,此外还有其他方法实现下拉菜单。这些将在之后进行讨论。

Javascript 相关文章推荐
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
vue router demo详解
Oct 13 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
javascript单页面手势滑屏切换原理详解
Mar 21 #Javascript
javascript实现dom元素可拖动
Mar 21 #Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 #Javascript
浅析AngularJS中的指令
Mar 20 #Javascript
简述Matlab中size()函数的用法
Mar 20 #Javascript
详解Matlab中 sort 函数用法
Mar 20 #Javascript
Sort()函数的多种用法
Mar 20 #Javascript
You might like
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
python学习必备知识汇总
2017/09/08 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
求职简历自荐信范文
2013/10/21 职场文书
厨房工作人员岗位职责
2013/11/15 职场文书
生产内勤岗位职责
2013/12/07 职场文书
文体活动总结范文
2014/05/05 职场文书
合伙经营协议书范本
2014/09/13 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
高中历史教学反思
2016/02/19 职场文书