Html 如何在离子中获取输入文本值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48253103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get input text value in ionic
提问by Jananath Banuka
I'm trying to get inputtext value and store it in a variable named inputin ionic. But I tried and failed. Can anyone please tell me what I have faulty done?
我正在尝试获取input文本值并将其存储在名为inputin的变量中ionic。但我尝试过，但失败了。谁能告诉我我做错了什么？
This is my HTML
这是我的 HTML
<ion-content>
<ion-list>
<ion-item>
<ion-label stacked>display</ion-label>
<ion-input type="text" text-right id="input" ></ion-input>
</ion-item>
</ion-list>
</ion-content>
and this is my home.tsin ionic
这是我home.ts的离子
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
var input=document.getElementById('input').nodeValue;
document.getElementById('seven').innerHTML=input;
}
}
Can anyone please help me?
谁能帮帮我吗？
回答by Sajeetharan
Actually you seems to be using angular not angularjs, use [(ngModel)]
实际上，您似乎使用的是 angular 而不是 angularjs，请使用 [(ngModel)]
<ion-input type="text" [(ngModel)]="name" text-right id="input" ></ion-input>
and inside the component,
在组件内部，
name:string;
name:string;
so whenever you need the value , you can use.
所以只要你需要 value ，你就可以使用。
console.log(this.name);
console.log(this.name);
回答by Ofir G
<ion-content>
<ion-list>
<ion-item>
<ion-label stacked>display</ion-label>
<ion-input type="text" text-right id="input" [(ngModel)]="inputValue"></ion-input>
</ion-item>
</ion-list>
</ion-content>
// ===
// ===
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
inputValue: string = "";
constructor(public navCtrl: NavController) {}
someFunction() {
// here you can use the 'this.inputValue' and get the value of the ion-input
}
}
we use the two way binding the value of ion-input with the class member inputValue,
我们使用两种方式将 ion-input 的值与类成员 inputValue 绑定，
whan you need to access on the value of the input, check the value of inputValue.
如果您需要访问输入的值，请检查 inputValue 的值。
here you can see an exemple I wrote on StackBlitz
在这里你可以看到我在StackBlitz 上写的一个例子
Two-way bindingis a combination of both property binding and event binding as it is a continuous synchronization of data/values from presentation layer to component and from component to the presentation layer.
Since this is a two way binding we have to use both the brackets - [ ( ) ]. Also ngModel is a directive which is used to bind the data both ways.
双向绑定是属性绑定和事件绑定的组合，因为它是从表示层到组件以及从组件到表示层的数据/值的连续同步。
由于这是一种双向绑定，我们必须同时使用两个括号 - [ ( ) ]。ngModel 也是一个指令，用于双向绑定数据。
