Angular2中select用法之设置默认值与事件详解


Posted in Javascript onMay 07, 2017

本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

一、设置默认值:

现在有三个学生小明,小红,小黑,对双向绑定的student设置你想要的select值就可以在下拉框默认选中

code1:

设置”请选择”为默认项,只需要把变量student设置为‘',即可默认到“请选择”,需要注意的是

<option value="">请选择</option>使用的是value(这是HTML原生的属性)

<option *ngFor="let item of students" [value]='item'>{{item}}</option>使用的是[value](在ng2中使用ngFor时,value需要用ng2的语法,即[value])

let students:string[]=['xiaoming','xiaohong','xiaohei'];
 let student:string='';
 let info:string='';
 <select [(ngModel)]="student">
 <option *ngFor="let item of students" [value]='item'>{{item}}</option> 
 </select>

code2:

当需要设置默认值到xiaoming时,只需要将变量student的初始值设为“xiaoming”

let students:string[]=['xiaoming','xiaohong','xiaohei'];
 let student:string='xiaoming';
 let info:string='';
 <select [(ngModel)]="student">
 <option *ngFor="let item of students" [value]='item'>{{item}}</option> 
 </select>

二、绑定事件

select下拉框主要通过ngModel和ngModelChange实现选择事件

如果你想要在select下拉框选中某一项时触发事件,可以将[(ngModel)]拆成ngModel和ngModelChange来实现

let students:string[]=['xiaoming','xiaohong','xiaohei'];
let student:string='';
let info:string='';
setInfo(){
 this.info=student;
}
<select [ngModel]="student" (ngModelChange)="student=$event;setInfo()">
 <option value="">请选择</option>
 <option *ngFor="let item of students" [value]='item'>{{item}}</option> 
</select>
{{info}}

在属性绑定中,一个值从模型中传到屏幕上的目标属性。 我们通过把名字括在方括号中来标记出目标属性, [] 。 这是一个 从模型到视图 的单向数据绑定。

在事件绑定中,值从屏幕上的目标属性传到模型中。 我们通过把名字括在圆括号中来标记出目标属性, () 。 这是一个 从视图到模型 的反向单向数据绑定。

在Angular2中[(x)] 的绑定目标时,会以x和xChange表示他的输入和输出属性。

代码中student=$event 原理如下ngModelChange是一个 Angular EventEmitter 类型的属性,当它触发时,它返回的是输入框的值

需要注意的是:目前select下拉框中不支持绑定json对象

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Angular.js能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js null,undefined,字符串小结
Aug 21 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 #Javascript
Angular.Js中ng-include指令的使用与实现
May 07 #Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 #Javascript
JavaScript的继承实现小结
May 07 #Javascript
vue2.0多条件搜索组件使用详解
Mar 26 #Javascript
Vue 进阶教程之v-model详解
May 06 #Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
You might like
福利彩票幸运号码自动生成器
2006/10/09 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
php中计算时间差的几种方法
2009/12/31 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
linux下php上传文件注意事项
2016/06/11 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
关于python导入模块import与常见的模块详解
2019/08/28 Python
解决Python使用列表副本的问题
2019/12/19 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
小学生获奖感言范文
2014/02/02 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
雨中的树观后感
2015/06/03 职场文书
贫困证明书范文
2015/06/16 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang