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

AngularJS(七):表单-单选框、下拉列表-LMLPHP

单选框

在AngulerJS中单选框的处理与复选框有不少相似之处,我们来看以下示例:

示例代码AngularJS_18.html

在单选框中,我们绑定了user.jobs属性,在控制器代码中,我们首先指定了jobs的值为“designer”,因此当页面加载完毕后,“设计师”被选中。在“选中教师”的方法select_teacher()中,我们设置了$scope.user.jobs="teacher",那么“教师”将被选中。

当然和上一个示例一样,在实际应用中,我们单选框可能是后台获取数据并组织的,那么照例需要使用ng-repeat了,我们来看以下代码:

示例代码AngularJS_19.html

以上代码中,其他部分我们都比较熟悉,需要注意的是ng-value属性,由于单选框是动态组织的,那么其value值也是动态的,因此需要由ng-value来赋值。

下拉列表

接下来我们来学习最后一个表单元素:下拉列表。其实从本质上来说,下拉列表与单选框很类似,都是从一组候选值中选取一个唯一值。因此,既然其功能类似,那么代码逻辑上也应该相似,请看以下代码:

示例代码AngularJS_20.html

在示例代码中,我们添加了<select>标签,将其绑定到user.job上,随后指定每一个<option>的值。比较其与示例18的代码,我们发现其控制器代码部分完全相同,这正体现了AngularJS代码的优势。,由于下拉列表与单选框的逻辑处理是相同的,因此其控制器代码也一致。如果实际应用中,需要将下拉列表更换成单选框,那么只需更换html代码即可,而控制逻辑部分无需变动。

照例我们使用ng-repeat来动态组织下拉列表,该示例代码与示例19基本类似,已经没有什么新的知识点可以说了:

示例代码AngularJS_21.html

在AngularJS中,对于下拉列表还有一个专门的ng-options属性,可以更方便的来组织数据,请看示例代码:

示例代码AngularJS_22.html

该代码与示例21唯一的区别就是html中的<select>标签的写法。首先我们发现其中并没有<option>标签,另外最重要的是在<select>中添加了ng-options属性,该属性的语法为:“item.下拉列表值
as item.下拉列表显示的内容 for item in
array”,其中item是自定义的别名,array为数据源。在我们的示例中,下拉列表的值就是jobs中各对象的value,下拉列表要显示的内容是label,设置item的别名为j,数据源是jobs,因此便是“j.value
as j.lable for j in jobs”。

该系列的示例代码

https://github.com/panyongwow/angularJS

05-11 11:33