angularjs---select使用---默认值及联动
angularjs---select使用---默认值及联动
代码

一. select设置默认显示内容&&获取下拉框显示内容. HTML <div>
<select ng-model="current_option" ng-options="option.key for option in option_array"> </select>
</div> JS $(function()
{
/**** 设置下拉框显示内容 ****/
$scope.option_array = [
{"key" : "hello", "value" : 1},
{"key" : "world", "value" : 2},
];
$scope.current_option = $scope.option_array[0]; // 下拉框默认显示内容 console.log($scope.current_option.key); // 获取下拉框显示内容
console.log($scope.current_option.value); // 获取下拉框显示内容对应的值
}) 二. select二级联动.
HTML <div>
<select ng-model="current_option" ng-options="option.key for option in option_array" ng-change="current_option_change()"> </select>
</div>
<div>
<select ng-model="child_current_option" ng-options="option.key for option in child_option_array"> </select>
</div> JS $(function() // 这是动作, 立即执行
{
/**** 设置父下拉框显示内容 ****/
$scope.option_array = [
{"key" : "hello", "value" : 2},
{"key" : "world", "value" : 2},
];
$scope.current_option = $scope.option_array[0]; // 父下拉框默认显示内容 /**** 初始加载时根据父下拉框内容显示子下拉框内容 ****/
$scope.child_change_with_father();
}) /**** 根据父下拉框当前显示内容设置子下拉框内容 ****/
$scope.child_change_with_father = function () // 这是方法, 调用执行
{
if ("hello" == $scope.current_option.key)
{
$scope.child_option_array = [
{"key" : "hello_child_one", "value" : 1},
{"key" : "hello_child_two", "value" : 2},
];
}
else if ("world" == $scope.current_option.key)
{
$scope.child_option_array = [
{"key" : "world_child_one", "value" : 3},
{"key" : "world_child_two", "value" : 4},
];
}
$scope.child_current_option = $scope.child_option_array[0]; // 子下拉框默认显示内容
} $scope.current_option_change = function()
{
$scope.child_change_with_father();
}

angularjs---select使用---默认值及联动的更多相关文章
- AngularJS的select设置默认值
AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-a ...
- element UI select 设定默认值
要为select设定默认值,有两个步骤 1.数据中,声明一个变量param:该变量的值设为你想设定的select option中value 2.控件的 v-model 绑定 param 即可 < ...
- angularjs中下拉框select option默认值
1.问题说明: option ng-repeat多空白项 2.解决方案: html: <ion-view hide-nav-bar="true"> <ion-co ...
- jquery 设置select的默认值
<select id="sel" > <option value="s1" > aaaa </option> <opt ...
- angularJs select ng-selected默认选中遇到的坑
本人,程序员妹子一枚,,,,名字中有萌字,简称萌妹子哈,,,首先贴出代码: 同样的方式,用ng-selected用来做回显,但是结果让萌妹我很是诧异,第一个“模板类型”那里的select可正常回显,第 ...
- <select>标签默认值设置
<td> <label>操作类型:</label> <select id="operation_type" class="com ...
- 给iview组件select设置默认值
1.首先,给select加一个v-model,如: <Select v-model="exam_name" > <Option v-for="(item ...
- layui select恢复默认值
- 设置select默认值
W3C下设置一个默认值直接为 select.value='默认值'. IE8下设置默认值必须有这个option才能被设置,不像W3C 如chrome这种,直接设置就能显示,如果IE下这样设置的话sel ...
随机推荐
- Webpack 中文指南
来源于:http://webpackdoc.com/index.html Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资 ...
- WebView·开发指南
WebView·开车指南 作者:凌俊琦链接:https://zhuanlan.zhihu.com/p/22247021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. T ...
- 教你一招:根据身份证号计算出生年月和年龄 text函数和mid函数混用 datedif函数和today函数混用
在电子表格Excel中,使用text函数和mid函数混用,根据身份证号计算出生年月: =text(mid(A2,,),"0!/00!/00") #0!/00!/00 为日期的格式# ...
- jQuery插件 -- Cookie插件jquery.cookie.js(转)
Cookie是网站设计者放置在客户端的小文本文件.Cookie能为用户提供很多的使得,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存 ...
- ubuntu 下简单录音
找了半天录音工具,甚至都在尝试用 pyAudio 自己写了,结果发现,原来有现成命令行工具用! 就是 sox 工具包.这个工具包有 4 个工具:sox, play, rec, soxi.rec 和 p ...
- LogStash配置、使用(三)
LogStash配置 官方文档:https://www.elastic.co/guide/en/logstash/current/index.html 查看yum安装路径 rpm -ql logsta ...
- flask-whooshalchemy需要注意的一点
在学习mega—tutorial时全文搜索模块遇到了问题,那就是使用全文搜索查询出来的数据为空的列表,输出了sql语句后发现where后没有条件,困扰了许久,后来才发现是自己不细心,在进行全文索引时应 ...
- thinkphp 后台权限列表
核心代码: // 检测用户权限权限 public function admin_priv($action){ $action_list = session('user.action_list'); i ...
- epoll ET模式陷阱分析
0. 前言 这篇文章主要记录在使用epoll实现NIO接入时所遇到的问题. 1. epoll简介 epoll是Linux下提供的NIO,其主要有两种模式,ET(Edge trige)和LT(Level ...
- [NHibernate]集合类(Collections)映射
系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...