文档章节

AngularJS 使用ngOption实现下拉列表

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

精选30+云产品,助力企业轻松上云!>>>

 

下拉列表的简单使用

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

孟飞阳

孟飞阳

粉丝 224
博文 1074
码字总数 572007
作品 5
朝阳
个人站长
私信 提问
加载中
请先登录后再评论。
【angularJS】学习笔记

一、一个html中多个ng-app //对于ng-app初始化一个AngularJS程序属性的使用需要注意,在一个页面中AngularJS自动加载第一个ng-app,其他ng-app会忽略 //如果需要加载其他ng-app程序,需要手动...

osc_3n35hvex
2019/05/23
5
0
Angular中ui-select的使用

Angular中ui-select的使用 最近工作一直很忙,没有时间整理知识,前几天项目中需要用到angular-ui-select,实现下拉框快速过滤效果,今天有时间研究了一下,终于搞明白了。 一、准备工作 1....

osc_sb0ev53k
2018/06/22
9
0
ASP.NET MVC下使用AngularJs语言(六):获取下拉列表的value和Text

前面Insus.NET有在Angularjs实现DropDownList的下拉列表的功能。但是没有实现怎样获取下拉列表的value和text功能。 下面分别使用ng-click和ng-change来实现。 先参考这篇《ASP.NET MVC下使用...

osc_it9fazjn
2018/03/10
2
0
angular 小技术点

angular 标签 angular 官网和下载 单选框的实现 定义2个函数 angular 表达式闪烁 https://www.cnblogs.com/DZzzz/p/10206449.html angular 为复选框关联非布尔类型的模型 控制 html 元素的显...

osc_g6d2xdbw
2019/07/29
2
0
AngularJS 最佳实践

AngularJS 是一个 Web 应用框架,它实现了前端的 MVC 架构,能让开发人员很方便地实现业务逻辑。 举个栗子,要做到下面的效果,以前可能需要写一连串的 JavaScript 代码绑定 N 多事件。而使用...

foodon
2014/10/30
887
1

没有更多内容

加载失败,请刷新页面

加载更多

你看起来很好吃

你看起来很好吃 本文分享自微信公众号 - ZackSock(ZackSock)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

ZackSock
2019/10/25
19
0
Python绘制日历图和热力图

日历热力图 实现某商店2018年10月1号至2019年3月1号期间每一天盈利额(产生5000至30000区间的随机数)的数据可视化。 要求在鼠标放置每个单元格上时显示具体日期和对应数据 import datetime ...

气象学家公众号
07/03
10
0
#乔布简历#计协纳新季福利!乔布简历20元会员卡免费送

#乔布简历#计协纳新季福利!@乔布简历 20元会员卡免费送!活动规则:1)转发本微博/说说@ 三个好友;2)搜索关注“乔布堂”微信公众号,回复“BC016@你的QQ号”;截图发给计协微信公众号:j...

若川
2014/09/22
0
0
第十一届蓝桥第一场省赛题 走方格

走方格 问题描述: 在平面上有一些二维的点阵。这些点的编号就像二维数组的编号一样。从上到下依次为第 1 至第 n 行,从左到右依次为第 1 至第 m 列,每一个点可以用行号和列号来表示。现在有...

osc_kf7nv2km
15分钟前
26
0
HTTP/2协议之Stream【原理笔记】

前言 前面三篇介绍了HPPT/2的“连接前言”、“二进制桢”、“头部压缩”。本文从“流及多路复用”、“流状态”、“流量控制”、“流优先级”、“HTTP/2扩展”介绍HTTP/2协议流相关知识。 一、...

瓜农老梁
05/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部