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 相关文章推荐
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
吃通javascript正则表达式
Apr 21 Javascript
详解Node.js如何处理ES6模块
May 15 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实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
Highcharts入门之简介
2016/08/02 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python转码问题的解决方法
2008/10/07 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
母亲节感恩活动记录
2014/03/16 职场文书
委托公证书
2014/04/08 职场文书
教师节获奖感言
2015/07/31 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
导游词之青城山景区
2019/09/27 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android