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脚本的性能的几个注意事项
Dec 22 Javascript
JS 自动安装exe程序
Nov 30 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
js获取height和width的方法说明
Jan 06 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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内存溢出问题的解决方法
2013/06/25 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
js脚本实现数据去重
2014/11/27 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
Javascript复制实例详解
2016/01/28 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Python编程入门的一些基本知识
2015/05/13 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python中functools模块函数解析
2017/03/12 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
python连接mongodb密码认证实例
2018/10/16 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
keras实现多种分类网络的方式
2020/06/11 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
师范毕业生个人求职信
2013/12/09 职场文书
工地安全质量标语
2014/06/07 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang