AngularJS select设置默认值的实现方法


Posted in Javascript onAugust 25, 2017

AngularJS的select设置默认值

在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现

<!DOCTYPE html> 
<html ng-app="noteApp" ng-controller="noteCtrl"> 
<head> 
 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="../plugins/angular.min.js"></script> 
 
</head> 
<body ng-app="noteApp" ng-controller="noteCtrl"> 
  <select ng-options="act.id as act.name for act in typeList" 
    ng-model="ZNoteVo.type"></select> 
 
</body> 
<script type="text/javascript"> 
  angular.module("noteApp", []).controller("noteCtrl", function($scope) { 
    $scope.typeList = [ { 
      id : '01', 
      name : "任务" 
    }, { 
      id : '02', 
      name : "日志" 
    }, { 
      id : '03', 
      name : "会议" 
    }, { 
      id : '04', 
      name : "学习" 
    }, { 
      id : '05', 
      name : "总结" 
    }, { 
      id : '99', 
      name : "其他" 
    } ]; 
    $scope.ZNoteVo={}; 
    $scope.ZNoteVo.type = "03"; 
  }); 
</script> 
</html>

当我们选择类型是03时则默认是会议

AngularJS select设置默认值的实现方法

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持,如有疑问请留言或者到本站社区交流讨论,大家共同进步!

Javascript 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
javascript如何实现create方法
Nov 04 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 #Javascript
node跨域请求方法小结
Aug 25 #Javascript
AngularJS中filter的使用实例详解
Aug 25 #Javascript
微信小程序实现表单校验功能
Mar 30 #Javascript
Angularjs中ng-repeat的简单实例
Aug 25 #Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 #Javascript
Angularjs中数据绑定的实例详解
Aug 25 #Javascript
You might like
利用static实现表格的颜色隔行显示
2006/10/09 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
js实现星星打分效果
2020/07/05 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python常用编译器原理及特点解析
2020/03/23 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
Python 绘制可视化折线图
2020/07/22 Python
python实现代码审查自动回复消息
2021/02/01 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
关于爱情的广播稿
2014/01/16 职场文书
校园之星获奖感言
2014/01/29 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
收款委托书范本
2014/09/11 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
思想品德课教学反思
2016/02/24 职场文书
2019军训心得体会
2019/06/27 职场文书
Android中View.post和Handler.post的关系
2022/06/05 Java/Android