angular实现select的ng-options

ng实现简单的select

<div ng-controller="ngSelect"><select ng-model="vm.selectVal" ng-options="o.title for o in vm.optionsData"><option value="">请选择</option></select>
</div>

var app = angular.module("app",[]);
app.controller("ngSelect",function($scope){var vm = $scope.vm = {};//数组对象用来给ng-options遍历vm.optionsData = [{title : "angularJs"},{title : "emberJs"},{title : "backboneJs"},{title : "knockoutJs"}];})

给ng-options自定义option的value值

<select ng-model="vm.selectVal" ng-options="o.id as o.title for o in vm.optionsData" ng-change="selectChange()"><option value="">请选择</option>
</select>

添加了id属性作为option的value
你可能会在页面视图看到option生成的value为0,1,2,3,是因为angular会自动添加索引为value的值
让我们来个ng-change事件监控来看看

vm.optionsData = [{id : 4543,title : "angularJs"
},{id : 546,title : "emberJs"
},{id : 456,title : "backboneJs"
},{id : 75,title : "knockoutJs"
}];$scope.selectChange = function(){//添加了ng-change事件来试试id值的输出
    console.log(vm.selectVal);
}

在线演示

转载于:https://www.cnblogs.com/leejersey/p/4663949.html

angular实现select的ng-options相关推荐

JS 对select动态添加options操作[IEFireFox兼容]
JS 对select动态添加options操作[IE&FireFox兼容] 做一个项目,遇到了要动态调整 select 选项的情况,就baidu了一下,发现了一篇与本文同名的帖子. 但是呢,那 ...
angular 的select标签以及联动
angular的select标签用法 <select ng-model="value" ng-options="item.id as item.name for i ...
select元素的options.add 与 insertbefore的区别
之前写了js checkbox.checked=true在document.body.appendChild(checkbox)前与后赋值,提到如果想改变元素的视觉效果(checkbox.checke ...
8、angular的select
1.数据源为数组 x for x in names第一个x代表在下拉框内显示的数据第二个x指的是在names里数据 <!DOCTYPE html><html><head ...
动态填充html select tag的options
用AMD模块写了一额select.js,用来帮助我动态创建options,并选中其中一个. 调用代码参考例子: var s5 = this.select.create();s5.bind(" ...
Javascript 操作select标记中options的方法
1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建select function cre ...
angular关于select的留白问题
Angular select留白的问题小白的总结,大神勿喷:需要转载请说明出处,如果有什么问题,欢迎留言总结:出现留白说明你的ng-model的值在option的value中没有对应的值: 一.直 ...
使用.NET Core 2.1，RabbitMQ，SignalR，EF Core 2.1和Angular 6开发微服务
目录介绍单一软件微服务架构微服务设计与规划示例应用程序示例应用程序的微服务微服务进程间通信微服务与消息队列之间的消息传递 RabbitMQ消息代理消息队列体系结构目标和决策帐户管理 ...
Angular 6集成Spring Boot 2,Spring Security,JWT和CORS
主要内容:Spring Boot 2的基础应用.CORS配置.Actuator监控:Spring Boot集成springfox-swagger,利用Swagger生成JSON API文档,利用Swa ...

angular实现select的ng-options

angular实现select的ng-options相关推荐

最新文章

热门文章