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

程序员文章站 2022-11-24 07:59:16

下拉列表的简单使用 ng-option指令使用很简单，只需要绑定两个属性：一个是ng-model用于获取选定的值；另一个是ng-options用于确定...

下拉列表的简单使用

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"
];

运行结果如：

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

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

<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="act for act 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: "fixing bugs"
};
$scope.activities =
[
"writing code",
"testing code",
"fixing bugs",
"dancing"
];
}]);
</script>
</body>
</html>

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

有的时候下拉列表并不是单纯的字符串数组，可能是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 >

运行效果如：

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

全部的代码如下：

<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 就会按照后面的值进行分组

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

全部代码：

<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 前面的值，就可以确定唯一的一个选项

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

全部代码如下：

<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>

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

上一篇： c#检测文本文件编码的方法

下一篇：学习使用AngularJS文件上传控件

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

微信小程序下拉列表的实现实例代码

C#中通过使用Connection类来实现打开/关闭数据库的代码实例

vue cli使用融云实现聊天功能的实例代码

vueJs实现DOM加载完之后自动下拉到底部的实例代码

微信小程序下拉列表的实现实例代码

Android自定义单选多选下拉列表的实例代码

Android实现三级联动下拉框下拉列表spinner的实例代码

PHP中的traits实现代码复用使用实例

Android下拉刷新PtrFrameLayout的使用实例代码

使用 js 简单的实现 bind、call 、aplly代码实例

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

微信小程序 下拉列表的实现实例代码

C#中通过使用Connection类来实现打开/关闭数据库的代码实例

vue cli使用融云实现聊天功能的实例代码

vueJs实现DOM加载完之后自动下拉到底部的实例代码

微信小程序 下拉列表的实现实例代码

Android自定义单选多选下拉列表的实例代码

Android实现三级联动下拉框 下拉列表spinner的实例代码

PHP中的traits实现代码复用使用实例

Android下拉刷新PtrFrameLayout的使用实例代码

使用 js 简单的实现 bind、call 、aplly代码实例

微信小程序下拉列表的实现实例代码

微信小程序下拉列表的实现实例代码

Android实现三级联动下拉框下拉列表spinner的实例代码