AngularJS(六):表单-复选框
本文也同步发表在我的公众号“我的天空”
复选框
复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾选状态,以及通过其勾选状态来设置被绑定的属性值为true或false。我们来看以下示例:
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<p>职业:
<input type="checkbox" ng-model="user.jobs.engineer">工程师
<input type="checkbox" ng-model="user.jobs.designer">设计师
<input type="checkbox" ng-model="user.jobs.teacher">教师
</p>
<input type="submit" value="提交">
<input type="button" value="选中教师" ng-click="select_teacher()">
</form>
</body>
<script>
var app=angular.module("myApp",[]);
app.controller("person",function($scope){
$scope.user={jobs:{engineer:true,designer:false,teacher:false}};
$scope.submit=function(){
alert(JSON.stringify($scope.user));
};
$scope.select_teacher=function(){
$scope.user.jobs.teacher=true;
}
});
</script>
示例代码AngularJS_16.html
分析以上例子,我们添加了三个复选框来显示职业,分别是“工程师”、“设计师”和“教师”,将其的ng-model分别绑定user.jobs中的相应属性。在控制器代码中,有这样一句代码:
$scope.user={jobs:{engineer:true,designer:false,teacher:false}};
我们设置了user.jobs中各属性的初始值,其中engineer为true,其他的均为false,这样在页面加载后,“工程师”复选框是被勾选的。当然如果不需要在初始阶段设置复选框的勾选状态时,这句可以省略。但是有一点要注意的是,这两种情况,在数据提交时jobs里的值是有区别的,假设我们在页面加载后,都勾选了“工程师”与“设计师”,而不勾选“教师”的话,这个时候提交数据:
如果我们手动设置了jobs的初始值,则提交的数据为:
{"jobs":{"engineer":true,"designer":true,"teacher":false}}
如果我们没有设置jobs的初始值,则提交的数据为:
{"jobs":{"engineer":true,"designer":true}}
我们发现在第二种情况下,没有勾选的“教师”复选框绑定的teacher属性,并没有出现在提交的数据中。这点要注意。
在按钮“选中教师”中绑定的方法select_teacher()演示了如果用代码来控制复选框的勾选,只需将绑定的属性值设置为true或false,即可做到勾选或取消勾选。
在有些情况下,我们需要更语义化的值来表达true或false,譬如我们希望为“Yes”和“No”,那么只需在复选框中添加以下指令:
ng-true-value="'Yes'" ng-false-value="'No'"
请注意双引号中的单引号不能省略。
在实际应用中,我们的复选框很有可能是从后台数据中获取并动态组织的,这样就要使用ng-repeat,我们将以上的例子做相应的更改来模拟该场景。请看以下代码:
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<span ng-repeat="job in user.jobs">
<input type="checkbox" ng-model="job.selected" ng-true-value="'Yes'" ng-false-value="'No'">{{job.label}}
</span><br>
<input type="submit" value="提交">
<input type="button" value="选中教师" ng-click="select_teacher()">
</form>
</body>
<script>
var app=angular.module("myApp",[]);
app.controller("person",function($scope){
$scope.user={jobs:[{label:'工程师',value:'engineer',selected:'Yes'},
{label:'设计师',value:'designer',selected:'No'},
{label:'教师',value:'teacher',selected:'No'}]};
$scope.submit=function(){
alert(angular.toJson($scope.user.jobs));
};
$scope.select_teacher=function(){
for(var i=0;i<$scope.user.jobs.length;i++){
if($scope.user.jobs[i].value=="teacher"){
$scope.user.jobs[i].selected='Yes';
return false;
}
}
}
});
</script>
示例代码AngularJS_17.html
我们来分析一下以上代码,比较与之前的代码的不同之处。我们把复选框放在一个span内,设置span的ng-repeat指令,从user.jobs中遍历对象,依次展示复选框。复选框的勾选状态由job.selected来指定,并且指定了ng-true-value与ng-false-value,而复选框上显示的文字则有job.label来指定。
在控制器代码中,我们声明了一个数组对象jobs,来存放各职业的名称(value)、显示文字(label)、以及初始勾选状态(selected)。
在submit提交代码中需要注意的是我们使用了angularjs自带的方法angular.toJson()来将jobs对象序列化成json,而不是之前的JSON.stringipy()方法。两者的区别在于由于在示例汇总,我们是用no-repeat的方式来显示复选框的,因此angularjs会在job对象中添加内在的属性“$$hashKay”,而该属性对于我们的实际的应用是不需要的,而angular.toJson()方法则可以去除这种被自动添加的内在属性,使得提交数据与我们的应用一致。
在处理“选中教师”的select_teacher()方法中,我们遍历jobs,查找value值等于“teacher”的job对象,将其的seleted属性更改为“Yes”,由于我们已经设置了复选框的ng-true-value='Yes',那么这样“教师”复选框便被勾选上了。
该系列的示例代码
https://github.com/panyongwow/angularJS
AngularJS(六):表单-复选框的更多相关文章
- 表单复选框input[type="checkbox"]
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- SpringMVC 表单复选框处理
<form action="" method="post"> <c:forEach items="${dblist}" v ...
- javascript入门 之 ztree (九 单/复选框问题)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
- bootstrap 列表 表格 表单 复选 单选 多选 输入框组
一.列表 ul li 二.表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...
- Android布局——单复选框(今天上课的内容总结下)
怎么感觉最近补充的都是监听器的内容,今天学长提了一个新的监听器,看起来很牛批(因为很长) // 添加文本更改的监听器, TextWatcher是监听器的回调接口 text.addTextChanged ...
- 8个非常个性化的CSS3单/复选框
单选框和复选框在网页表单中应用十分广泛,但是浏览器默认自带的单选框和复选框样式不仅不统一,而且大多都比较简单丑陋.本文给大家介绍了一些基于CSS3的个性化单选框和复选框,一些选中动画是基于jQuery ...
- Android之单复选框及Spinner实现二级联动
一.基础学习 1.图形学真的很神奇啊....查了些资料做出了3D云标签,哈哈...其实直接拿来用的,我们要效仿鲁迅先生的拿来主义,嘿嘿~~3D标签云就是做一个球面,然后再球面上取均匀分布的点,把点坐标 ...
- python selenium单/复选框操作
一.单选:radio 1.首先是定位选择框的位置 2.定位id,点击图标就可以了,代码如下(获取url地址方法:把上面源码粘贴到文本保存为.html后缀后用浏览器打开,在浏览器url地址栏复制出地址就 ...
- 原创:纯CSS美化单复选框(checkbox、radio)
最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...
随机推荐
- BZOJ3295:[CQOI2011]动态逆序对
浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://www.lydsy.com/JudgeOnline/prob ...
- BZOJ2028:[SHOI2009]会场预约(线段树版)
浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://www.lydsy.com/JudgeOnline/prob ...
- Python3解leetcode Maximum SubarrayClimbing Stairs
问题: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either cl ...
- SQLServer 微软团队开源项目 (web 版?)
http://www.codeplex.com/site/users/view/SQLTeamAdmin
- 【239】◀▶IEW-Unit04
Unit 4 Youth Issues: Computer Use 1 Model1题目及范文分析 Some teenagers spend a lot of time playing compute ...
- [poj1811]Prime Test(Pollard-Rho大整数分解)
问题描述:素性测试兼质因子分解 解题关键:pollard-rho质因数分解,在RSA的破译中也起到了很大的作用 期望复杂度:$O({n^{\frac{1}{4}}})$ #include<cst ...
- 动态调用dll遇到的问题
问题:动态调用第三方提供的dll报错. Run-Time Check Failure #0 - The value of ESP was not properly saved across a fun ...
- 2-3 Flutter开发环境与iOS开发环境设置(Mac)
Mac下环境搭建 先不看了 都是Mac下的环境搭建
- hdu 4336 Card Collector (概率dp+位运算 求期望)
题目链接 Card Collector Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- GridView 中RowDataBound 获取绑定后的各个字段的值
protected void GridView_dept_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType ...