文档章节

AngularJS 使用ngOption实现下拉列表

孟飞阳
 孟飞阳
发布于 2016/12/11 08:14
字数 1048
阅读 13
收藏 0

 

下拉列表的简单使用

ng-option指令使用很简单,只需要绑定两个属性:

一个是ng-model用于获取选定的值;

另一个是ng-options用于确定下拉列表的元素数组。

<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>

上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定,然后列表中的选项是activities中的每一个值。数据如下:

$scope.engineer = {
                name: "Dani",
                currentActivity: "Fixing bugs"
            };
         
            $scope.activities =
            [
                "Writing code",
                "Testing code",
                "Fixing bugs",
                "Dancing"
            ];

运行结果如:

为了美观一点,这里引用了bootstrap。

View Code

复杂对象,自定义列表名称

有的时候下拉列表并不是单纯的字符串数组,可能是json对象,例如:

$scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];

这个时候,绑定的数据就必须是与这里面的格式相同的数据,比如直接复制其中一条:

$scope.engineer = {
                 name: "Dani" ,
                 currentActivity: {
                     id: 3,
                     type: "Work" ,
                     name: "Fixing bugs"
                 }
             };

当然也可以直接指定成:

$scope.engineer = {currentActivity:activities[3]}

然后在指令中可以循环列表拼接处下拉框的名称

<select 
        ng-model = "engineer.currentActivity"
        class="form-control"
        ng-options = "a.name +' (' + a.type + ')' for a in activities" >               
</select >

运行效果如:

全部的代码如下:

<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController" class="container">
        <div class="col-md-12">
        {{engineer.name}} is currently: {{ engineer.currentActivity}}
        </div>
        <div class="col-md-4">
            <label for="name">Choose a new activity:</label>            
            <select 
            ng-model = "engineer.currentActivity"
            class="form-control"
            ng-options = "a.name +' (' + a.type + ')' for a in activities" >               
            </select > 
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("EngineeringController",["$scope",function($scope){
            $scope.engineer = {
                 name: "Dani" ,
                 currentActivity: {
                     id: 3,
                     type: "Work" ,
                     name: "Fixing bugs"
                 }
             };
         
             $scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];
         }]);
    </script>
</body>
</html>

实现下拉列表的分组

其实分组与前面的例子很像,只要把空间中的ng-options的值换成下面:

<select ng-model = "engineer.currentActivity"
        class="form-control"
        ng-options = "a.name group by a.type for a in activities" >               
</select >

添加 group by 就会按照后面的值进行分组

全部代码:

<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController" class="container">
        <div class="col-md-12">
        {{engineer.name}} is currently: {{ engineer.currentActivity}}
        </div>
        <div class="col-md-4">
            <label for="name">Choose a new activity:</label>            
            <!-- <select 
            ng-model = "engineer.currentActivity"
            class="form-control"
            ng-options = "a.name +' (' + a.type + ')' for a in activities" >               
            </select >  -->
            <select ng-model = "engineer.currentActivity"
                    class="form-control"
                    ng-options = "a.name group by a.type for a in activities" >               
            </select > 
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("EngineeringController",["$scope",function($scope){
            $scope.engineer = {
                 name: "Dani" ,
                 currentActivity: {
                     id: 3,
                     type: "Work" ,
                     name: "Fixing bugs"
                 }
             };
         
             $scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];
         }]);
    </script>
</body>
</html>

按照id进行标识

由于之前的ng-model相当于初始的时候给设定了一个值。当你选择一个下拉列表选项的时候,就会覆盖掉这个初始值。

所以更多的时候会使用一个id进行标识,这样在初始化赋值的时候,只需要设定一个id就可以了。

$scope.engineer = {
                 currentActivityId: 3
             };
         
             $scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];

指令可以写成下面的格式

<select 
       ng-model = "engineer.currentActivityId"
       class="form-control"
       ng-options = "a.id as a.name group by a.type for a in activities" >               
</select >

通过 as 前面的值,就可以确定唯一的一个选项

全部代码如下:

<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController" class="container">
        <div class="col-md-12">
        current is: {{ engineer.currentActivityId}}
        </div>
        <div class="col-md-4">
            <label for="name">Choose a new activity:</label>            
            <select 
                ng-model = "engineer.currentActivityId"
                class="form-control"
                ng-options = "a.id as a.name group by a.type for a in activities" >               
            </select > 
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("EngineeringController",["$scope",function($scope){
            $scope.engineer = {
                 currentActivityId: 3
             };
         
             $scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];
         }]);
    </script>
</body>
</html>

参考

Using ngOptions in AngularJS:http://odetocode.com/blogs/scott/archive/2013/06/19/using-ngoptions-in-angularjs.aspx

本文转载自:http://www.cnblogs.com/xing901022/p/5122702.html

共有 人打赏支持
孟飞阳
粉丝 204
博文 954
码字总数 540957
作品 5
朝阳
个人站长
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
第214天:Angular 基础概念

一、Angular 简介 1、 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开...

半指温柔乐
04/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

centos7安装redis及开机启动

配置编译环境: sudo yum install gcc-c++ 下载源码: wget http://download.redis.io/releases/redis-3.2.8.tar.gz 解压源码: tar -zxvf redis-3.2.8.tar.gz 进入到解压目录: cd redis-3......

hotsmile
40分钟前
0
0
Confluence 6 数据库和临时目录

数据库 所有的其他数据库,包括有页面,内容都存储在数据库中。如果你安装的 Confluence 是用于评估或者你选择使用的是 Embedded H2 Database 数据库。数据库有关的文件将会存储在 database...

honeymose
55分钟前
1
0
day62-20180820-流利阅读笔记

1.今日导读 2.带着问题听讲解 3.新闻正文(中英文对照) 4.重点词汇 5.拓展内容

aibinxiao
今天
0
0
分布式锁实现及对比

一、问题介绍 日常工作中很多场景下需要用到分布式锁,例如:任务运行(多个节点同一时刻同一个任务只能在一个节点上运行(分片任务除外)),交易接受(前端交易请求发送时,可能由于两次提...

yangjianzhou
今天
7
0
【AI实战】快速掌握TensorFlow(二):计算图、会话

在前面的文章中,我们已经完成了AI基础环境的搭建(见文章:Ubuntu + Anaconda + TensorFlow + GPU + PyCharm搭建AI基础环境),以及初步了解了TensorFlow的特点和基本操作(见文章:快速掌握...

雪饼
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部