实践中学习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访问ashx文件示例代码
Aug 11 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 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加密解密函数分享
2014/06/05 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
python进程与线程小结实例分析
2018/11/11 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
原生js开发的日历插件
2017/02/04 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python import自定义模块方法
2015/02/12 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
Python logging模块handlers用法详解
2020/08/14 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
三傻大闹宝莱坞观后感
2015/06/03 职场文书
余世维讲座观后感
2015/06/11 职场文书
人事任命书范本
2015/09/21 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书