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 21 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
jquery实现保存已选用户
Jul 21 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 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性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
python实现五子棋小游戏
2020/03/25 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
大学生演讲稿范文
2014/01/11 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
歌咏比赛主持词
2015/06/29 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python