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 相关文章推荐
javascript 控制弹出窗口
Apr 10 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 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 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python列表(List)知识点总结
2019/02/18 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
简单了解Django ContentType内置组件
2019/07/23 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
python手写均值滤波
2020/02/19 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
现金会计岗位职责
2013/12/05 职场文书
公益广告宣传方案
2014/02/28 职场文书
企业指导教师评语
2014/04/28 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
聘任书范文大全
2015/09/21 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫