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 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
Javascript Global对象
Aug 13 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
JS实现的视频弹幕效果示例
Aug 17 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
php中memcache 基本操作实例
2015/05/17 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
浅谈Vue的响应式原理
2019/05/30 Javascript
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
python实现外卖信息管理系统
2018/01/11 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
餐厅考勤管理制度
2014/01/28 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
英文自荐信常用句子
2014/03/26 职场文书
企业安全生产承诺书
2014/05/22 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
机械机修工岗位职责
2014/08/03 职场文书
2014年评职称工作总结
2014/11/20 职场文书
2016年党建工作简报
2015/11/26 职场文书
在Docker容器中部署SQL Server
2022/04/11 Servers