www.qjdy.com-奇迹赌场 > www.qjdy.com > ng-option指令使用很简单

原标题:ng-option指令使用很简单

浏览次数:90 时间:2019-07-13

下拉列表的简练利用

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

ng-option指令使用很简单。运维结果如:

图片 1

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

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.jmtsj8.com/uploads/allimg/190713/0Q1232953-1.jpg"></script>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script src="http://www.jmtsj8.com/uploads/allimg/190713/0Q1231B0-2.jpg"></script>
<script src="http://www.jmtsj8.com/uploads/allimg/190713/0Q123IT-3.jpg"></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 > 

运维效果如:

图片 2

全体的代码如下:

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.jmtsj8.com/uploads/allimg/190713/0Q1232953-1.jpg"></script>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script src="http://www.jmtsj8.com/uploads/allimg/190713/0Q1231B0-2.jpg"></script>
<script src="http://www.jmtsj8.com/uploads/allimg/190713/0Q123IT-3.jpg"></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 就能够遵照后边的值实行分组

图片 3

漫天代码:

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.jmtsj8.com/uploads/allimg/190713/0Q1232953-1.jpg"></script>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script src="http://www.jmtsj8.com/uploads/allimg/190713/0Q1231B0-2.jpg"></script>
<script src="http://www.jmtsj8.com/uploads/allimg/190713/0Q123IT-3.jpg"></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 前面包车型地铁值,就足以明确独一的四个增选

图片 4

全总代码如下:

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.jmtsj8.com/uploads/allimg/190713/0Q1232953-1.jpg"></script>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script src="http://www.jmtsj8.com/uploads/allimg/190713/0Q1231B0-2.jpg"></script>
<script src="http://www.jmtsj8.com/uploads/allimg/190713/0Q123IT-3.jpg"></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达成下拉列表的实例代码,希望对我们持有扶助。

您可能感兴趣的小说:

  • 实例详解AngularJS完成Infiniti级联合浮动菜单
  • Angularjs自定义指令实现三级联动采纳地理地点
  • 基于AngularJs Bootstrap AngularStrap相结合贯彻省市区联合浮动代码
  • Angularjs完毕下拉框联合浮动的以身作则代码
  • AngularJS模糊查询功用实当代码(过滤内容下拉菜单排序过滤敏感字符验证决断后加多表格消息)
  • AngularJS service之select下拉菜单效果
  • AngularJS中下拉框的高端用法示例
  • angularjs下拉框空白的化解办法
  • angularjs实现下拉列表的入选事件示例
  • Angularjs达成带查找筛选成效的select下拉框示例代码
  • AngularJS达成的select二级联合浮动下拉菜单作用示例

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com,转载请注明出处:ng-option指令使用很简单

关键词: bbin官网

上一篇:更多关于js特效相关内容感兴趣的读者可查看本站

下一篇:没有了