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 相关文章推荐
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
详解用node编写自己的cli工具
May 23 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
Angular Renderer (渲染器)的具体使用
May 03 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 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
Zerg建筑一览
2020/03/14 星际争霸
PHPlet在Windows下的安装
2006/10/09 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
vue-loader教程介绍
2017/06/14 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
vue之延时刷新实例
2019/11/14 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
pyenv命令管理多个Python版本
2017/03/26 Python
详谈python http长连接客户端
2017/06/12 Python
用python实现的线程池实例代码
2018/01/06 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
服装设计专业自荐书范文
2013/12/30 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
公司年终奖分配方案
2014/06/16 职场文书
幼儿园教师自我评价
2015/03/04 职场文书