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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 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
二进制交叉权限微型php类分享
2014/02/07 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Python网页解析器使用实例详解
2020/05/30 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
SQL面试题
2013/04/30 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
学生自我鉴定范文
2013/10/04 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
社区综治工作汇报
2014/10/27 职场文书
2014年体育部工作总结
2014/11/13 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
高中体育课教学反思
2016/02/16 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
基于Python实现一个春节倒计时脚本
2022/01/22 Python
Python+pyaudio实现音频控制示例详解
2022/07/23 Python