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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
asp 的 分词实现代码
2007/05/24 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
老生常谈js数据类型
2017/08/03 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
Python比较两个图片相似度的方法
2015/03/13 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
元旦晚会邀请函
2014/01/27 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
优秀教师工作感言
2014/02/16 职场文书
作文批改评语大全
2014/04/23 职场文书
教师读书活动总结
2014/05/07 职场文书
国际贸易求职信
2014/07/05 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
教务处教学工作总结
2015/08/10 职场文书