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

本文主要给大家介绍了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对象

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

总结

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

时间: 2017-05-05

Angular 中 select指令用法详解

最近在angular中使用select指令时,出现了很多问题,搞得很郁闷.查看了很多资料后,发现select指令并不简单,决定总结一下. select用法: <select ng-model="" [name=""] [required=""] [ng-required=""] [ng-options=""]> </select> 属性说明: 发现并没有ng-change属性 ng-

angular select 默认值设置方法

如下所示: <select ng-model="selected" ng-options="x.id as x.name for x in users"></select> $scope.users = [ {name:'a',id:'1'}, {name:'b',id:'2'}, {name:'c',id:'3'} ]; $scope.selected='2';//id的值,区分类型 $scope.selected=$scope.users

AngularJS select加载数据选中默认值的方法

问题描述: 在我们开发项目过程中,避免不了会用到select下拉框,那么在angular中如何使用select呢? 解决方案: 可以用ng-options来动态加载option,然后在用ng-model来匹配.代码如下: //html <select ng-model="role_id1" ng-options="o.name for o in list5"></select> //js $scope.list5 = [{"id&q

layer插件select选中默认值的方法

再次更改代码的时候,因为城市下拉列表是从数据库查出来的,所以这时候就想到了一起以前用到的一个方法:select重新渲染 就是把未渲染的元素该怎么设置值还怎么设置值,然后把layer渲染出来的页面样式,从新再渲染一次, ,, 示例: [layui渲染文档](http://www.layui.com/doc/modules/form.html#render) $("#userName).val("小明"); ... $("#city").val("天

解析MySQL设置当前时间为默认值的方法

MySQL设置当前时间为默认值的问题我们经常会遇到,下面就为您介绍MySQL设置当前时间为默认值的实现全步骤,希望对您能有所启迪.数据库:test_db1创建表:test_ta1两个字段:id              (自增 且为主键),createtime 创建日期(默认值为当前时间) 方法一.是用alert table语句: 复制代码 代码如下: use test_db1; create table test_ta1( id mediumint(8) unsigned not nulll 

JS简单设置下拉选择框默认值的方法

本文实例讲述了JS简单设置下拉选择框默认值的方法.分享给大家供大家参考,具体如下: //根据下拉对象默认选中后台对应的记录 function setSelectOption(objSelect, targetValue){ if(objSelect){ var options = objSelect.options; if(options){ var len = options.length; for(var i=0;i<len;i++){ if(options[i].value == targ

jQuery设置和移除文本框默认值的方法

本文实例讲述了jQuery设置和移除文本框默认值的方法.分享给大家供大家参考.具体分析如下: 开始时,文本框设定一个默认值.当光标移动到文本框时,如果文本框当前值是默认值,那么清空:离开文本框时,文本框值如果为空,那么将文本框值设置为默认值. 代码如下: $(document).ready(function() { //each遍历文本框 $(".input").each(function() { //保存当前文本框的值 var vdefault = this.value; $(thi

vue2.0 下拉框默认标题设置方法

昨天到今天,用vue2.0在写一个性别选择框,一给option添加seledted属性就报错这里 下面是报错的代码 ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-c231dfa2!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/second.vue template syntax error <select v-model=&qu

django前端页面下拉选择框默认值设置方式

1,前端样式 2,前端html代码 <select name="row.status"> <option value="ON" {% if row.status == 'ON' %} selected="selected" {% endif %}>ON</option> <option value="OFF" {% if row.status == 'OFF' %} selected=

JS函数多个参数默认值指定方法分析

本文实例讲述了JS函数多个参数默认值指定方法.分享给大家供大家参考,具体如下: 函数有一个参数时,以往这样定义(参数为p1): function mfun(p1){ - } 当需要为p1设定一个默认值时 function mfun(p1){ if(p1===undefined) p1=5; //默认值设为5 - } 当函数需要2个参数时,以前习惯这样写 function mfun(p1,p2){-} 后来发现完全不需要这样写,js函数甚至不需要在括弧内预设参数名,可以用一下方式传入任意多个参数自

PHP yii实现model添加默认值的方法(两种方法)

yii实现model添加默认值的方法(2种方法) 这篇文章主要介绍了yii实现model添加默认值的方法,结合实例分析了在rules()方法及在beforeSave()方法中设定两种实现技巧,对大家也许有帮助, 本文实例讲述了yii实现model添加默认值的方法.分享给大家供大家参考,具体如下: yii model 继承自CActiveRecord 有些字段可能不会出现在表单中,而需要在程序中加入.如订单编号,时间戳,操作的user_id等等. 以下二种方法: 1.在rules()方法中设定: