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 11 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
Js的Array数组对象详解
Feb 22 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
js自定义瀑布流布局插件
May 16 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
Echarts.js无法引入问题解决方案
Oct 30 Javascript
JavaScript实现弹出窗口效果
Dec 09 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中绘制图像的一些函数总结
2014/11/19 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
python网络编程实例简析
2014/09/26 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
详解Python 中的容器 collections
2020/08/17 Python
办公室主任岗位职责
2013/11/08 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
社会调查研究计划书
2014/05/01 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript