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椭圆旋转相册实现代码
Jan 16 Javascript
javascrip关于继承的小例子
May 10 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
vue-cli如何快速构建vue项目
Apr 26 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
微博短链接算法php版本实现代码
2012/09/15 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python3注册全局热键的实现
2020/03/22 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
半年思想汇报
2013/12/30 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
模范教师事迹材料
2014/02/10 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
婚前财产协议书范本
2014/10/19 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
企业团队精神心得体会
2016/01/19 职场文书
2019各种承诺书范文
2019/06/24 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python