AngularJS——select使用及默认值详解
来源:互联网 发布:python api文档 编辑:程序博客网 时间:2024/03/28 23:17
在angularjs中,select设置默认值特别不方便,如果动态的改变用原生的就更不是不好解决了,那就需要用angularjs为select提供的属性和方法了。
select
中的ngOption
可以采用和ngRepeat
指令类似的循环结构,其data source可以是array或者是object。针对两种data source又有衍生的好几种用法。
JS代码如下:
function selectCtrl($scope) { $scope.selected = ''; $scope.model = [{ id: 1, name:'David', sex:'男' },{ id: 2, name:'Rose', sex:'女' }, { id: 3, name:'Lee', sex:'男' }];}
<select ng-model="selected" ng-options="x.name for x in model"> <option value="">-- 请选择 --</option></select>PS:x是自定义的,代表数组的各个对象,x.name就是选项中要显示的值。label可以随便写,很多功能;如:
<select ng-model="selected" ng-options="(x.name+'--'+x.sex) for x in model"> <option value="">-- 请选择 --</option></select>这样都是可以的!
第二种:label group by group for value in array;
<select ng-model="selected" ng-options="x.name group by x.sex for x in model"> <option value="">-- 请选择 --</option></select>PS: x.name group by x.sex for x in model;这句话的意思就是把数组model里的各个x对象的以性别分组,将名字显示在下拉框里。
第三种: select as label for value in array;
<select ng-model="selected" ng-options="x.id as x.name for x in model"> <option value="">-- 请选择 --</option></select>PS:这是最复杂的一种结构,它吧ng-model重新附了值,在这里ng-model=selected=x.id;这样也就可以设置默认值了,只要在js代码中写这一句话:
<span style="font-size:14px;color:#666666;background-color: rgb(255, 255, 255);">$scope.selected = n;</span>
如果给ng-model = x.id;那么就可以根据数组里面的各个对象的id来设置$scope.selected的值,这样就可以设置下拉框select的默认值了。
0 0
- AngularJS——select使用及默认值详解
- angularjs select option默认值
- angularJs select设置默认值
- angularjs中下拉框select option默认值
- angularjs中下拉框select option默认值
- AngularJS--select加载数据选中默认值
- Struts2的select使用及默认值的测试
- Struts2的select使用及默认值的测试
- angularJs select用法详解
- 使用JQuery对checkbox及radio与select下拉单选赋默认值
- 使用JS动态设置select的默认值
- AngularJS—AngularJS 工作原理详解
- [置顶]AngularJS“路由”的定义概念、使用详解——AngularJS学习资料教程
- AngularJS select中ngOptions用法详解
- linux—select详解
- linux—select详解
- linux—select详解
- linux—select详解
- android设置透明activity
- React-native开发流程及问题整理
- 2016/09/29 星期四
- java读取文件内容,解析Json格式数据
- 多线程程序设计的8个规则
- AngularJS——select使用及默认值详解
- Linux集群安装MySQL---属于源码安装
- windows常用消息大全(系统消息、通告消息、用户消息)
- 【集体智慧编程】第二章、提供推荐
- 【文件上传 前端】文件上传 前端 Part1 —— 传统表单上传
- [Android实践]之:Fragment完全解析
- left join 多表联查
- ssh配置小结
- 第5周项目5-后缀表达式