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 相关文章推荐
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
js实现下拉框二级联动
Dec 04 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 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
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
详解Python3的TFTP文件传输
2018/06/26 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
基于Pytorch SSD模型分析
2020/02/18 Python
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
库房管理员岗位职责
2014/03/09 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
优秀党员推荐材料
2014/12/18 职场文书
2015年团支部工作总结
2015/04/03 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android