实践中学习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的跨域传输数据(JSONP)
Mar 10 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
详解JS函数stack size计算方法
Jun 18 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
js不常见操作运算符总结
Nov 20 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的控制语句
2006/10/09 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
javascript instanceof 内部机制探析
2010/10/15 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
举例讲解Python装饰器
2020/12/24 Python
党员违纪检讨书
2014/02/18 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
婚礼秀策划方案
2014/05/19 职场文书
学生安全承诺书
2014/05/22 职场文书
建设工程授权委托书
2014/09/22 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js