本文也同步发表在我的公众号“我的天空”

复选框

复选框只有两个值：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（六）：表单-复选框的更多相关文章

  1. 表单复选框input[type="checkbox"]

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  2. SpringMVC 表单复选框处理

    <form action="" method="post"> <c:forEach items="${dblist}" v ...

  3. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  4. bootstrap 列表 表格 表单 复选 单选 多选 输入框组

    一.列表 ul li 二.表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...

  5. Android布局——单复选框（今天上课的内容总结下）

    怎么感觉最近补充的都是监听器的内容,今天学长提了一个新的监听器,看起来很牛批(因为很长) // 添加文本更改的监听器, TextWatcher是监听器的回调接口 text.addTextChanged ...

  6. 8个非常个性化的CSS3单/复选框

    单选框和复选框在网页表单中应用十分广泛,但是浏览器默认自带的单选框和复选框样式不仅不统一,而且大多都比较简单丑陋.本文给大家介绍了一些基于CSS3的个性化单选框和复选框,一些选中动画是基于jQuery ...

  7. Android之单复选框及Spinner实现二级联动

    一.基础学习 1.图形学真的很神奇啊....查了些资料做出了3D云标签,哈哈...其实直接拿来用的,我们要效仿鲁迅先生的拿来主义,嘿嘿~~3D标签云就是做一个球面,然后再球面上取均匀分布的点,把点坐标 ...

  8. python selenium单/复选框操作

    一.单选:radio 1.首先是定位选择框的位置 2.定位id,点击图标就可以了,代码如下(获取url地址方法:把上面源码粘贴到文本保存为.html后缀后用浏览器打开,在浏览器url地址栏复制出地址就 ...

  9. 原创：纯CSS美化单复选框（checkbox、radio）

    最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...

随机推荐

  1. Node.js集成支付宝接口注意事项

    目录 签名 发送请求表单 验签 总结 签名 使用node.js自带的加密模块crypto和字符编码模块iconv-lite 根据支付宝接口文档参数格式得到签名之前的字符串beforeSignStr,然 ...

  2. 重学JAVA基础(五):面向对象

    1.封装 import java.util.Date; public class Human { protected String name; protected BirthDay birthDay; ...

  3. TX-

    NVIDIA Jetson TX2刷机 TX1 Gsteramer 环境配置 TX1 ssh配置

  4. java项目文件的路径问题

    title: 项目下的路径问题 tags: grammar_cjkRuby: true --- 在javaee的项目中,存取文件,解析xml和properties文件,以及项目中的文件,都需要获取路径 ...

  5. python基础知识-字符串

    字符串: 赋值方法 a = 'name' a = str('name') 字符串的方法: #!/usr/bin/env python class str(object): ""&q ...

  6. 分布式一致性协议之：Zab（Zookeeper的分布式一致性算法）

    Zookeeper使用了一种称为Zab(Zookeeper Atomic Broadcast)的协议作为其一致性复制的核心,据其作者说这是一种新发算法,其特点是充分考虑了Yahoo的具体情况:高吞吐量 ...

  7. Java创建线程的三种方法比较

    一般有三种方法,Thread,Runnable,Callable. Runnable和Callable的区别 (1)Callable规定的方法是call(),Runnable规定的方法是run(). ...

  8. windows下搭建nginx服务器及实现nginx支持https配置流程

    最近刚接触到了tomcat结合nginx做网站的负载均衡.之前对tomcat搭配nginx实现负载均衡也写过,在上一篇的博客中,最近遇到的问题是要在http的基础上支持https.也就是支持加密的请求 ...

  9. 【原】：关于使用springmvc的responseBody注解返回json的一些总结

    配置不正确可能会出现406错误 1:首先需要导入三个jar包: 2:需要在springmvc的配置文件文件中添加转换器并开启注解驱动: 3:controller:这里返回object也是可以的; 4: ...

  10. 3dmax切割平行线

    1 选择物体(可编辑多边形),选择边 ,然后点击切片平面 2 然后会出现黄色线框 3 移动旋转黄色线框到合适位置,然后点切片 4 结果