实践中学习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 相关文章推荐
jQuery 改变CSS样式基础代码
Feb 11 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
基于jquery实现图片放大功能
May 07 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
jquery replace方法去空格
May 08 jQuery
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
vue路由实现登录拦截
Mar 24 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的面试题集
2006/11/19 PHP
dedecms中常见问题修改方法总结
2007/03/21 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
JavaScript 的继承
2011/10/01 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
vue如何判断dom的class
2018/04/26 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
详解JavaScript的变量
2019/04/04 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
python3+PyQt5实现柱状图
2018/04/24 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
Python通过len函数返回对象长度
2020/10/22 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
2019年.net常见面试问题
2012/02/12 面试题
怎么写自荐书范文
2014/02/12 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
工程项目经理岗位职责
2015/02/02 职场文书