AngularJS（七）：表单-单选框、下拉列表
本文也同步发表在我的公众号“我的天空”
单选框
在AngulerJS中单选框的处理与复选框有不少相似之处，我们来看以下示例：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<p>职业:
<input type="radio" name='job' value='engineer' ng-model="user.job">工程师
<input type="radio" name='job' value='designer' ng-model="user.job">设计师
<input type="radio" name='job' value='teacher' ng-model="user.job">教师
</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={job:'designer'};
$scope.submit=function(){
alert(angular.toJson($scope.user));
};
$scope.select_teacher=function(){
$scope.user.job="teacher";
}
});
</script>
示例代码AngularJS_18.html
在单选框中，我们绑定了user.jobs属性，在控制器代码中，我们首先指定了jobs的值为“designer”，因此当页面加载完毕后，“设计师”被选中。在“选中教师”的方法select_teacher()中，我们设置了$scope.user.jobs="teacher"，那么“教师”将被选中。
当然和上一个示例一样，在实际应用中，我们单选框可能是后台获取数据并组织的，那么照例需要使用ng-repeat了，我们来看以下代码：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<span ng-repeat="job in jobs">
<input type="radio" name='job' ng-value='job.value' ng-model="user.job">{{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.jobs=[{label:'工程师',value:'engineer'},
{label:'设计师',value:'designer'},
{label:'教师',value:'teacher'}];
$scope.user={job:'designer'};
$scope.submit=function(){
alert(JSON.stringify($scope.user));
};
$scope.select_teacher=function(){
$scope.user.job="teacher";
}
});
</script>
示例代码AngularJS_19.html
以上代码中，其他部分我们都比较熟悉，需要注意的是ng-value属性，由于单选框是动态组织的，那么其value值也是动态的，因此需要由ng-value来赋值。
下拉列表
接下来我们来学习最后一个表单元素：下拉列表。其实从本质上来说，下拉列表与单选框很类似，都是从一组候选值中选取一个唯一值。因此，既然其功能类似，那么代码逻辑上也应该相似，请看以下代码：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<p>职业:
<select ng-model="user.job">
<option value="engineer">工程师</option>
<option value="designer">设计师</option>
<option value="teacher">教师</option>
</select>
</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={job:'designer'};
$scope.submit=function(){
alert(angular.toJson($scope.user));
};
$scope.select_teacher=function(){
$scope.user.job="teacher";
}
});
</script>
示例代码AngularJS_20.html
在示例代码中，我们添加了<select>标签，将其绑定到user.job上，随后指定每一个<option>的值。比较其与示例18的代码，我们发现其控制器代码部分完全相同，这正体现了AngularJS代码的优势。，由于下拉列表与单选框的逻辑处理是相同的，因此其控制器代码也一致。如果实际应用中，需要将下拉列表更换成单选框，那么只需更换html代码即可，而控制逻辑部分无需变动。
照例我们使用ng-repeat来动态组织下拉列表，该示例代码与示例19基本类似，已经没有什么新的知识点可以说了：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<p>职业:
<select ng-model="user.job" ng-repeat="job in jobs">
<option ng-value="job.value">{{job.label}}</option>
</select>
</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.jobs=[{label:'工程师',value:'engineer'},
{label:'设计师',value:'designer'},
{label:'教师',value:'teacher'}];
$scope.user={job:'designer'};
$scope.submit=function(){
alert(JSON.stringify($scope.user));
};
$scope.select_teacher=function(){
$scope.user.job="teacher";
}
});
</script>
示例代码AngularJS_21.html
在AngularJS中，对于下拉列表还有一个专门的ng-options属性，可以更方便的来组织数据，请看示例代码：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<p>职业:
<select ng-model="user.job" ng-options="j.value as j.label for j in jobs">
</select>
</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.jobs=[{label:'工程师',value:'engineer'},
{label:'设计师',value:'designer'},
{label:'教师',value:'teacher'}];
$scope.user={job:'designer'};
$scope.submit=function(){
alert(JSON.stringify($scope.user));
};
$scope.select_teacher=function(){
$scope.user.job="teacher";
}
});
</script>
示例代码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
AngularJS（七）：表单-单选框、下拉列表的更多相关文章
- 【AngularJs】---表单验证
1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...
- angularJS 过滤器 表单验证
过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...
- AngularJS实现表单手动验证和表单自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证.一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给for ...
- Rails-Treasure chest1 (自定义Model网址;多语言包; 时区设置, TimeZone类; 格式日期时间; 表单单选UI; 表单多选UI;Select2 Plugin)
自定义Model网址: 随机值网址SecureRandom.base58 多语言包, 包括默认语言设置和user自设置. 时区设置, TimeZone类 ,增加user自选时区功能 格式日期时间: x ...
- 基于angularJS的表单验证练习
今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...
- AngularJS 的表单验证
最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...
- AngularJS：表单
ylbtech-AngularJS:表单 1.返回顶部 1. AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控 ...
- 走进AngularJs(九)表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
- Html笔记(七)表单
表单标签: <form> 表单标签是最常用的标签,用于与服务器端的交互. <input>:输入标签:接受用户输入信息 其中type属性指定输入标签的类型 文本框 text:输入 ...
随机推荐
- bzoj1055玩具取名——区间DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1055 区间DP,注意初始化!! 因为没记忆化,TLE了一晚上,区间DP尤其要注意不重复递归! ...
- XmlSerialize error: There was an error generating the XML document.
今天遇到一个很火的问题, 一个c#的class 序列化成xml后抛出异常, 信息为: XmlSerialize error: There was an error generating the XML ...
- 微信小程序再次升级：卖货小店小程序不用开发也能进行交易
卖货小店小程序,不用开发一行代码也能帮商家实现交易功能,这个真是几家欢喜几家愁啊,对于开发小程序商城的公司来说,这个无疑是一个雷霆之际,第一反应就是,这下完了,小程序自身就支持交易,那还要我们这些第三 ...
- 10天彻底搞定-webpack4.0
本机存放的路径: F:\教程\10天彻底搞定-webpack4.0 联想电脑代码存放的路径: D:\MyDemos\webpack4 10天彻底搞定-webpack4.0 1.webpack课程介绍 ...
- iOS横屏设置的几种方式
1.界面旋转,MainScreen的宽高不变,键盘位置不变 CGFloat duration = [UIApplication sharedApplication].statusBarOrientat ...
- 给Fitnesse添加调用多参数fixture的调用方法
修改文件:fitnesse.slim.fixtureInteraction.DefaultInteraction.java 修改如下三处内容: (注意只支持仅含有一个参数,且该参数是多参数的fixtu ...
- Codeforces Round #459 (Div. 2):D. MADMAX(记忆化搜索+博弈论)
题意 在一个有向无环图上,两个人分别从一个点出发,两人轮流从当前点沿着某条边移动,要求经过的边权不小于上一轮对方经过的边权(ASCII码),如果一方不能移动,则判负.两人都采取最优策略,求两人分别从每 ...
- 小a和uim之大逃离（luogu P1373 dp）
小a和uim之大逃离(luogu P1373 dp) 给你一个n*m的矩阵,其中元素的值在1~k内.限制只能往下和往右走,问从任意点出发,到任意点结束,且经过了偶数个元素的合法路径有多少个.在此题中, ...
- 洛谷U3348 A2-回文数
U3348 A2-回文数 题目背景 方方方很喜欢回文数,于是就有了一道关于回文数的题目. 题目描述 求从小到大第n(1<=n<=10^18)个回文数. 注释:出题人认为回文数不包括0. 输 ...
- 湖南集训day7
难度:☆☆☆☆☆☆ /* 由观察可知 同种颜色的减去他的父亲值相同 我们考虑把询问的两个数分别减去小于它的最大斐波那契数. */ #include<iostream> #include&l ...