实践中学习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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
如何使用angularJs
May 08 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
React实现轮播效果
2020/08/25 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
python简单读取大文件的方法
2016/07/01 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
Java程序员面试90题
2013/10/19 面试题
整顿机关作风心得体会
2014/09/10 职场文书
收入证明范本
2015/06/12 职场文书
法定代表人资格证明书
2015/06/18 职场文书
python获取对象信息的实例详解
2021/07/07 Python
Python list列表删除元素的4种方法
2021/11/01 Python
Go 内联优化让程序员爱不释手
2022/06/21 Golang