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表单提交的代码
Sep 13 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 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
用cookies来跟踪识别用户
2006/10/09 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
JS定时器实例
2013/04/17 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
一百多行python代码实现抢票助手
2018/09/25 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
Python内存管理实例分析
2019/07/10 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
物流专员岗位职责
2014/02/17 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
南极大冒险观后感
2015/06/05 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle