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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 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
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
php查看网页源代码的方法
2015/03/13 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
javascript 写类方式之四
2009/07/05 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
python爬虫添加请求头代码实例
2019/12/28 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
医药代表个人求职信范本
2013/12/19 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
红头文件任命书范本
2014/06/05 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
英文感谢信范文
2015/01/21 职场文书
销售经理岗位职责
2015/01/31 职场文书
报案材料怎么写
2015/05/25 职场文书
2019年大学推荐信
2019/06/24 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
利用python进行数据加载
2021/06/20 Python
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android