AngularJS使用ngOption实现下拉列表的实例代码

网络编程 2024/11/14 佚名

3 2 1

下拉列表的简单使用

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。

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/UploadFiles/2021-04-02/angular.min.js">

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


有的时候下拉列表并不是单纯的字符串数组，可能是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="/UploadFiles/2021-04-02/angular.min.js">

实现下拉列表的分组


其实分组与前面的例子很像，只要把空间中的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="/UploadFiles/2021-04-02/angular.min.js">

按照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="/UploadFiles/2021-04-02/angular.min.js">

以上所述是小编给大家分享的AngularJS使用ngOption实现下拉列表的实例代码，希望对大家有所帮助。

                                
                                
                                    angularjs_ngoption,angularjs下拉列表 
                                
                                    标签：
                                        angularjs_ngoption,angularjs下拉列表

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“AngularJS使用ngOption实现下拉列表的实例代码”

AngularJS使用ngOption实现下拉列表的实例代码

暂无“AngularJS使用ngOption实现下拉列表的实例代码”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

AngularJS使用ngOption实现下拉列表的实例代码

angularjs_ngoption,angularjs下拉列表

AngularJS中监视Scope变量以及外部调用Scope方法

JavaScript实现ASC转汉字及汉字转ASC的方法

评论“AngularJS使用ngOption实现下拉列表的实例代码”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接