首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在角度/离子2中获取选定的ngModel值?

在Angular/Ionic 2中,可以通过使用ngModel指令来获取选定的ngModel值。ngModel是Angular提供的双向数据绑定指令,它可以将表单控件的值与组件中的属性进行双向绑定。

要获取选定的ngModel值,可以在组件中使用@ViewChild装饰器来获取对应的元素引用。首先,在模板中给ngModel指令添加一个标识符,例如#myModel,然后在组件中使用@ViewChild装饰器来获取该元素的引用。

示例代码如下:

在模板中:

代码语言:html
复制
<ion-input [(ngModel)]="myValue" #myModel></ion-input>
<button (click)="getValue()">获取值</button>

在组件中:

代码语言:typescript
复制
import { Component, ViewChild } from '@angular/core';
import { IonInput } from '@ionic/angular';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  @ViewChild('myModel') myModel: IonInput;
  myValue: string;

  getValue() {
    console.log(this.myModel.value);
  }
}

在上述代码中,通过@ViewChild装饰器将模板中标识为#myModel的元素与myModel属性进行关联。然后,在getValue方法中,可以通过this.myModel.value来获取ngModel的值。

这样就可以在Angular/Ionic 2中获取选定的ngModel值了。

关于Ionic 2的更多信息和腾讯云相关产品,请参考以下链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

​别再用方括号Python中获取字典,试试这个方法

字典是启蒙教育时期,大家不可获取好帮手 字典是无序术语和定义集合,这意味着: · 每个数据点都有标识符(即术语)和(即定义)。...author = { "first_name":"Jonathan", "last_name":"Hsu", "username":"jhsu98" } 访问字典老(坏)方法 字典中访问传统方法是使用方括号表示法...这可能会引发严重问题,尤其是处理不可预测业务数据时。 虽然可以try/except或if语句中包装我们语句,但是更适用于叠装字典术语。...如果没有定义术语,则返回一个默认,这样就不必处理异常。 这个默认可以是任何,但请记住它是可选。如果没有包含默认,则使用Python里空等效None。...使用.setdefault()方法 有时候,不仅希望避免字典中出现未定义术语,还希望代码能够自动纠正其数据结构。.setdefault()结构与.get()相同。

3.5K30

DWR中实现直接获取一个JAVA类返回

DWR中实现直接获取一个JAVA类返回     DWR是Ajax一个开源框架,可以很方便是实现调用远程Java类。但是,DWR只能采用回调函数方法,回调函数中获取返回,然后进行处理。...那么,到底有没有办法直接获取一个方法放回呢?...,然后回调函数中处理,上面那段话执行后会显示test,也就是java方法返回。...但是,采用回家函数不符合我们习惯,有些时候我们就想直接获取返回进行处理,这时候就无能为力了。 我们知道,DWR是Ajax框架,那么必然拥有了Ajax特性了。...现在,让我们打开DWRengine.js文件,搜索一个asyn,马上,就发现了一个setAsync方法,原来,DWR是这个方法设置成属性封装起来了。这样,我们就可以实现获取返回功能了。

3.2K20

Angular 6.x 表单快速入门

第一节 - 创建最简单输入框 如何实现双向绑定? Angular 表单中,我们通过 ngModel 指令来实现双向绑定。... Angular 中,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,然后通过 userName.valid 判断表单控件是否通过验证。... Angular 中,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,然后通过该对象 errors 属性,来获取对应验证规则 (如 required, minlength...如何获取表单提交 Angular 中,我们可以通过 #loginForm="ngForm" 方式获取 ngForm 对象,然后通过 loginForm.value 来获取表单。... Angular 中表单控件有以下状态,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,进而获取控件状态信息。

4.6K20

Angular 从入坑到挖坑 - 表单控件概览

name 属性则是 angular 用来注册控件 key,所以表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件状态 表单中使用 ngModel...,从而生成错误信息列表 进行用户输入数据有效性验证时,控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板中获取到指定控件状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...同模板驱动表单数据有效性验证相同,响应式表单中同样可以使用原生表单验证器,设定规则时,需要将模板中控件名对应数据第二个参数改为验证规则 响应式表单中,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应...,返回 null,当数据无效时,则会返回一个对象信息,这里 nameinvalid 就是我们模板中获取错误信息 key <label...ngOnInit(): void { } } 针对多个字段进行交叉验证时,模板页面中,则需要通过获取整个表单错误对象信息来获取到交叉验证错误信息 <div class="form-group

18.9K20

AngularDart4.0 英雄之旅-教程-04明细 顶

' of undefined in [null] 尽管selectedHero.name显示模板中,但必须保留DOM外英雄详细信息,直到出现选定英雄。...刷新浏览器,该应用程序不再失败,名称列表再次显示浏览器中。 当没有选定英雄时,ngIf指令从DOM中移除英雄详情HTML。 没有英雄细节元素或绑定担心。...结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示列表下方时,很难列表中识别选定英雄。...在上面添加样式元数据中,有一个名为selected自定义CSS类。 为了让选定英雄更清晰可见,当用户点击英雄名字时,你将把这个选定class应用到。...当表达式为false时,Angular删除选定类。 ===运算符测试给定对象是否相同。 模板语法指南中阅读有关[class]绑定更多信息。

3K30

Angular—都2019了,你还对双向数据绑定念念不忘

写法上略有不同,目的和实现效果却是一样,当js或ts文件中name发生变化时,html模板中会发生改变,反之,当用户input中输入时候,js或ts文件中name也会发生相应改变...$event可以视作获取输出关键字,不同场景下代表对象是不同,上面这段代码中由于是监听了input事件,所以它代表就是 InputEvent,通过属性查询我们获取到了事件上传递。...不看源码情况下,如果是让你去实现 ngModel 这个指令,相信你肯定有思路。 肯定要把输入属性 ngModel 和input元素value关联起来。...赋值时候直接用是event,而不是event.target.value。这也很容易,要内部实现时取出inputEvent对象传递给 ngModelChange 就Ok了。...方法并没有接收参数,而是直接log出组件上name属性,这里是为了说明当name子组件中被修改以后,angular帮助我们把 AppComponent 上name进行了修改。

4.3K30

Angular Input和Output

Input 是属性装饰器,用来定义组件内输入属性。实际应用场合,我们主要用来实现父组件向子组件传递数据。...: ${event}`; } } 双向绑定 介绍双向绑定之前,我们先来说个需求:即在 CounterComponent 子组件 count 发生变化时候,需同步更新 AppComponent...通过上面的实例,我们知道我们可以 AppComponent 父组件中监听 CounterComponent 子组件 change 事件,然后 change 事件中更新 initialCount ...ngModel 使用过 Angular 1.x 读者,应该很熟悉 ng-model 这个指令,我们通过它来实现数据双向绑定。那么 Angular 中有对应指令么 ?...exportAs 属性,获取 ngModel 实例,进行获取控件状态,控件状态分类如下: valid - 表单有效 pristine - 表单未改变 dirty - 表单已改变 touched

2.3K50

Angular ViewChild和ViewChildren

视图查询 ngAfterViewInit 钩子函数调用前完成,因此 ngAfterViewInit 钩子函数中,就能正常获取查询元素。...,我们也需要同步更新组件类,即引入 ContentChildren 装饰器,并且 ngAfterViewInit 生命周期内更新 AuthMessageComponent 组件 days 属性。...组件,ViewChild 装饰器除了支持 Type 类型参数外,还支持字符串参数,而字符串是模板引用。...组件类,使用 ViewChild 装饰器来获取邮箱输入框元素引用: @ViewChild('email') email: ElementRef; 最后 ngAfterViewInit 生命周期钩子中输出...nativeElement 属性,你会发现该属性对应是原生 DOM 元素,因此我们可以 ngAfterViewInit 生命周期钩子中执行某些 DOM 操作: ngAfterViewInit(

2.7K20

Angular系列教程-第四节

,FormBuilder 等类构建出数据对象就是响应式表单,响应式表单中,我们会在数据源里面进行各种操作,像添加校验等,html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动表单是我们实例化好一个类数据之后,html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...它会控制那些带有 ngModel 指令和 name 属性元素,监听他们属性。...总结 响应式表单是动态,模板驱动表单是固定 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件获取setvalue...实现双向绑定 使用模板变量来获取表单 4.内置验证器 min 此验证器要求控件大于或等于指定数字 max 此验证器要求控件小于等于指定数字 required 此验证器要求控件具有非空

2.8K50

AngularDart4.0 指南- 模板语法二 顶

NgModel - 与[(ngModel)]形成元素双向绑定 开发数据输入表单时,通常都会显示数据属性,并在用户进行更改时更新该属性。 使用NgModel指令进行双向数据绑定使得这一切变得简单。...大多数情况下,Angular将引用变量设置为声明元素。...HeroDetailComponent.hero是HeroDetailComponent角度输入属性,因为数据从模板绑定表达式流入该属性。...HeroDetailComponent.deleteRequest是从HeroDetailComponent角度来看一个输出属性,因为模板绑定语句中,事件流出该属性并处理该处理程序。...想象一下,诸如a.b.c.d这样长属性路径中某个地方防止空。 Angular安全导航操作符(?.)是一种更为流畅和方便方法来防止属性路径中出现空。表达式达到第一个空时会被释放。

29.9K20

SpEL表达式解析注解,spring切面,并且扩展类实现获取到注解里面的,并且将保存到数据库里面

,这个方法返回主键,那么这个需要使用到spring里面的aop了。...2 流程: 自定义一个注解,将这个注解放到方法上面,之后利用aop重写一个类,实现功能扩展,在这个功能扩展类里面,从注解里面获取到对应,注解是放在方法上,这个注解要获取方法参数里面的,所以要用于...扩展类里面,要从注解里面获取到对应,之后将保存到想要保存数据库里面。...= null) { // 获取到方法上面注解里面的属性 String student = oper.student();...(); //获取传入目标方法参数 也就是传入集合 Object[] args = joinPoint.getArgs(); //

99520

Angular 6.x 基础教程

语法,我们获取对象是对应 DOM 元素引用。...第四节 - 事件进阶 获取鼠标事件 第三节示例中,假如我们需要获取鼠标事件,那应该怎么办呢?...除了 index 外,我们还可以获取以下: first: boolean —— 若当前项是可迭代对象第一项,则返回 true last: boolean —— 若当前项是可迭代对象最后一项,则返回...上面示例中,我们使用 [(ngModel)]="message" 语法实现数据双向绑定。该语法也称作 Banana in the Box 语法,即香蕉盒子里 (比较形象生动,记忆该语法)。 ?...使用 ngClass 指令 ngClass 指令接收一个对象字面量,对象 key 是 CSS class 名称,value 是 truthy/falsy ,表示是否应用该样式。

15.6K20

文献翻译:Statistical Approaches for Gene Selection, Hub Gene Identification and Module Interaction in...

步骤5:获取特定基因(第i个基因)及其WGS 步骤6:测试第i个基因假设并获得其p 步骤7:对所有基因重复步骤5-6(i = 1,2,......观察到大多数选定基因负责过渡金属离子结合,金属离子结合,阳离子结合,离子结合等(图2A)。由于水或土壤中高浓度Al离子,这些分子功能(MF)可能被激活。...另外两种MF即氧化还原酶(氧化还原酶)和激酶活性也存在于这些选定基因中(图2A)。基因在氧化还原活性中显着行为可能与复杂化学反应中电子传递有关,其离子传输期间平衡电荷。...发现膜上存在一些选定基因参与金属离子细胞外或液泡中转运,以维持pH和跨膜质子梯度[48]。 ? 图2. Al胁迫下所选基因和hub基因功能富集分析。...发现一些选定基因参与细胞外金属离子运输,这可能与第一个过程有关。金属离子传输期间平衡电荷化学反应下与电子传递有关氧化还原活性[45]功能可能与第二个过程有关。

95311

Angular 2 表单(下)

使用 ngModel 进行双向数据绑定 接下来我们使用 ngModel 进行双向数据绑定,通过监听 DOM 事件,来实现更新组件属性。...修改 app/site-form.component.html ,使用 ngModel 把我们表单绑定到模型。...状态 为 true 时类 为 false 时类 控件已经被访问过 ng-touched ng-untouched 控件已经变化 ng-dirty ng-pristine 控件是有效 ng-valid... angular-forms 目录下创建 forms.css 文件,代码如下: forms.css 文件: .ng-valid[required], .ng-valid.required { border-left...删除掉 name 字段数据,显示结果如下所示: 添加一个网站 接下来我们创建一个用于添加网站表单, app/site-form.component.html 添加一个按钮: app/site-form.component.html

1.6K10

AngularDart4.0 英雄之旅-教程-03英雄编辑器

', 刷新浏览器,页面将显示标题和英雄名 双大括号是Angular插绑定语法。 这些插绑定将组件标题和英雄属性作为字符串显示HTML标题标签内。...“显示数据”页面中阅读有关插更多信息。 Hero对象 英雄需要更多属性。 将英雄从文字字符串转换为类。 创建一个具有id和name属性Hero类。...数据两个方向流动:从属性到文本框,从文本框返回到属性。 表单和模板语法页面中阅读有关ngModel更多信息。 @Component(指令:...)...[(ngModel)]="hero.name" ^^^^^^^^^^^^^^^^^^^^^^^ 虽然NgModelangular_forms库中定义有效Angular指令,但默认情况下不可用。...你走过路 保留你已构建代码 “Tour of Heroes”应用程序使用双重大括号插(一种单向数据绑定)来显示Hero对象应用程序标题和属性。

3.2K10
领券