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 常用代码技巧大收集
Feb 25 Javascript
js类型检查实现代码
Oct 29 Javascript
brook javascript框架介绍
Oct 10 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
JS实现身份证输入框的输入效果
Aug 21 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
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
第十四节 命名空间 [14]
2006/10/09 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python3.x对JSON的一些操作示例
2017/09/01 Python
基于python socketserver框架全面解析
2017/09/21 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
python3 mmh3安装及使用方法
2019/10/09 Python
flask 实现token机制的示例代码
2019/11/07 Python
python 经典数字滤波实例
2019/12/16 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Python 高效编程技巧分享
2020/09/10 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
活动策划邀请函
2014/02/06 职场文书
班组长竞聘书
2014/03/31 职场文书
电视节目策划方案
2014/05/16 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
javascript Number 与 Math对象的介绍
2021/11/17 Javascript