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 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
9个javascript语法高亮插件 推荐
Jul 18 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
javascript json2 使用方法
2010/03/16 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
理工大学毕业生自荐信范文
2014/02/22 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
《泉水》教学反思
2014/04/11 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python