AngularJS(六):表单-复选框

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

 

AngularJS(六):表单-复选框_第1张图片

 

复选框

 

复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾选状态,以及通过其勾选状态来设置被绑定的属性值为true或false。我们来看以下示例:

 


    


        

职业:
         工程师
         设计师
         教师
        


        
         "select_teacher()">
    

 
 

示例代码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,我们将以上的例子做相应的更改来模拟该场景。请看以下代码:

 


    


         ng-repeat="job in user.jobs">
         { {job.label}}
        


        
        
    

 
 

示例代码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

 

转载于:https://www.cnblogs.com/mysky7511/p/6653531.html

你可能感兴趣的:(javascript,json)