实践中学习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 验证身份证信息有效性
Mar 28 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 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面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
微信小程序实现美团菜单
2018/06/06 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Numpy之reshape()使用详解
2019/12/26 Python
什么是Python中的顺序表
2020/06/02 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
Python实现石头剪刀布游戏
2021/01/20 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
书香家庭事迹材料
2014/05/09 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
使用JS实现简易计算器
2021/06/14 Javascript