AngularJS ng-options 实现下拉列表数据绑定教程

128 浏览量更新于2024-09-01 收藏 55KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

资源详情

资源推荐

AngularJS中中ng-options实现下拉列表的数据绑定方法实现下拉列表的数据绑定方法

今天小编就为大家分享一篇AngularJS中ng-options实现下拉列表的数据绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟

随小编过来看看吧

下拉列表的简单使用下拉列表的简单使用

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

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

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

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

$scope.engineer = {

currentActivity: "Fixing bugs"

};

$scope.activities =

[

"Writing code",

"Testing code",

"Fixing bugs",

"Dancing"

];

运行结果如：

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

<head>

</head>

<body>

{{engineer.name}} is currently: {{ engineer.currentActivity}}

</div>

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

var myAppModule = angular.module("myApp",[]);

myAppModule.controller("EngineeringController",["$scope",function($scope){

$scope.engineer = {

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

currentActivity: {

id: 3,

type: "Work" ,

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38723683

粉丝: 6
资源: 908

AngularJS ng-options 实现下拉列表数据绑定教程

ng-options和ng-checked在表单中的高级运用(推荐)

angularjs中的ng-options

ng-options 下拉框 只读

ng-options语法

angularjs 1.6.9 select ng-bind

angularjs 1.6.9 select如何绑定数据

解释一下 <label class="col-3 require" for="type">类型</label> <select class="form-control col-7" id="type" name="type" ng-model="model.type" ng-options="o.id as o.name for o in type"></select>

解释一下<select class="form-control" name="type" id="type" ng-model="model.type" ng-options="o.id as o.name for o in type"></select>

AngularJS实现三级级联下拉选择框

angularjs设置防抖

X-Frame-Options: DENY X-Content-Type-Options: nosniff

如何在Nginx中设置X-Frame-Options

elementui下拉列表怎么绑定数据库数据

SELECT- OPTIONS使用方法

java中增加X-Frame-Options配置

HTTP 响应头 X-Frame-Options 缺失处理方法

vue element-ui如何实现下拉列表多选

缺失"X-Content-Type-Options"头修复方法

X-Frame-Options响应头 怎么设置

X-Frame-options头未设置

最新资源

ng-options 下拉框只读

解释一下
<label class="col-3 require" for="type">类型</label> <select class="form-control col-7" id="type" name="type" ng-model="model.type" ng-options="o.id as o.name for o in type"></select>

X-Frame-Options响应头怎么设置