AngularJS（七）：表单-单选框、下拉列表

最新推荐文章于 2024-06-10 15:20:42 发布

qq_29069777

最新推荐文章于 2024-06-10 15:20:42 发布

阅读量583

点赞数

分类专栏：前端文章标签： js javascript 前端 angularjs

原文链接：https://www.mk2048.com/blog/blog.php?id=hhjh02cibhaa&title=AngularJS%EF%BC%88%E4%B8%83%EF%BC%89%EF%BC%9A%E8%A1%A8%E5%8D%95-%E5%8D%95%E9%80%89%E6%A1%86%E3%80%81%E4%B8%8B%E6%8B%89%E5%88%97%E8%A1%A8

版权

前端专栏收录该内容

1175 篇文章 2 订阅

订阅专栏

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

单选框

在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

更多专业前端知识，请上【猿2048】www.mk2048.com

qq_29069777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS（七）：表单-单选框、下拉列表

本文也同步发表在我的公众号“我的天空” 单选框在AngulerJS中单选框的处理与复选框有不少相似之处，我们来看以下示例： <body ng-app="myApp" ng-con...
复制链接

扫一扫