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

单选框

在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(七):表单-单选框、下拉列表的更多相关文章

  1. 【AngularJs】---表单验证

    1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...

  2. angularJS 过滤器 表单验证

    过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...

  3. AngularJS实现表单手动验证和表单自动验证

    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证.一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给for ...

  4. Rails-Treasure chest1 (自定义Model网址;多语言包; 时区设置, TimeZone类; 格式日期时间; 表单单选UI; 表单多选UI;Select2 Plugin)

    自定义Model网址: 随机值网址SecureRandom.base58 多语言包, 包括默认语言设置和user自设置. 时区设置, TimeZone类 ,增加user自选时区功能 格式日期时间: x ...

  5. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  6. AngularJS 的表单验证

    最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...

  7. AngularJS:表单

    ylbtech-AngularJS:表单 1.返回顶部 1. AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控 ...

  8. 走进AngularJs(九)表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  9. Html笔记(七)表单

    表单标签: <form> 表单标签是最常用的标签,用于与服务器端的交互. <input>:输入标签:接受用户输入信息 其中type属性指定输入标签的类型 文本框 text:输入 ...

随机推荐

  1. MUI框架开发HTML5手机APP

    出处:http://www.cnblogs.com/jerehedu/p/7832808.html  前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...

  2. TI官网常用链接

    TMS320C6000系列DSP库dsplib下载 TMS320C6000系列DSP库imglib下载 TMS320C6000系列DSP库mathlib下载 TMS320C66657技术文档

  3. caffe solver

    caffe solver https://groups.google.com/forum/#!topic/caffe-users/mUIi42aKWHQ https://github.com/BVLC ...

  4. tp框架下,数据库和编辑器都是utf-8, 输出中文却还是乱码

    输出: array(2) { [0]=> array(4) { ["id"]=> string(1) "1" ["user"]= ...

  5. C# 把datagridview控件上的表格输出到excel文件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. [bzoj2154]Crash的数字表格(mobius反演)

    题意:$\sum\limits_{i = 1}^n {\sum\limits_{j = 1}^m {lcm(i,j)} } $ 解题关键: $\sum\limits_{i = 1}^n {\sum\l ...

  7. Spring入门第十课

    Spring表达式语言:SpEL Spring表达式语言(简称SpEL)是一个支持运行时查询和操作对象图的强大的表达式语言. 语法类似于EL:SpEL使用#{...}作为定界符,所有在大括号中的字符都 ...

  8. 聊聊心跳机制及netty心跳实现

    我们在使用netty的时候会使用一个参数,ChannelOption.SO_KEEPALIVE为true, 设置好了之后再Linux系统才会对keepalive生效,但是linux里边需要配置几个参数 ...

  9. [UE4]C++设置AnimInstance的相关问题

    注意:ue4 4.17调用LoadObject<UAnimBlueprintGeneratedClass>直接崩 http://aigo.iteye.com/blog/2285001 UA ...

  10. 学习SpringMVC时遇到的一些问题

    1. 找不到mapping 比较弱智的问题,忘了在对应的类上加上 @Controller 注解了 2. Model中设置的值不显示 Eclipse 自动生成的web.xml 是 2.3版本的,网上说改 ...