实践中学习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 相关文章推荐
js Form.elements[i]的使用实例
Nov 13 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
vue.js 实现输入框动态添加功能
Jun 25 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
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 array_slice函数的使用以及参数详解
2008/08/30 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python之django母板页面的使用
2018/07/03 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python多任务及返回值的处理方法
2019/01/22 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python实现滑雪游戏
2020/02/22 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Python csv文件记录流程代码解析
2020/07/16 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
小学生倡议书范文
2014/05/13 职场文书
运动会横幅标语
2014/06/17 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
党员个人承诺书
2015/04/27 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
html实现弹窗的实例
2021/06/09 HTML / CSS