离子获取文本框值 [英] ionic getting textbox value

问题描述

您好我是离子新手，我有以下html和js代码。我试图在单击按钮时获取文本框上的用户输入值。 （如果可能的话，我想将它存储到一个对象或一个本地缓存中，以便它可以在整个同一个会话中使用）

Hi I'm new to ionic and I have the following html and js code. I am trying to get the value of user input on textbox upon clicking on the button. (If possible, I would like to store it into an object or a local cache so that it could be use throughout the same session)

<ion-navbar *navbar hideBackButton>
     <ion-title>Welcome</ion-title>
</ion-navbar>

<ion-content>

<ion-list>

    <ion-item>
        <ion-label floating>Please enter a nickname</ion-label>
        <ion-input type="text" value=""></ion-input>
    </ion-item>

</ion-list>

<div padding>
    <button (click)="login()" primary block>Continue</button>
</div>

下一个我的.js代码

 import {Component} from "@angular/core";
 import {MenuController, NavController, Alert} from "ionic-angular";
 import {Index} from "../index/index";

 @Component({
    templateUrl: 'build/pages/login/login.html'
 })
 export class Login {
    static get parameters() {
        return [[MenuController], [NavController]];
    }

 constructor(menu, nav) {
        this.menu = menu;
        this.menu.swipeEnable(false);

        this.nav = nav;
    }

    login() {
        let alert = Alert.create({
        title:      'You have entered',
        message:    'Hello',
        buttons:    [
    {
      text: 'Cancel',
      handler: () => {
        console.log('Cancel clicked');
      }
    },
    {
      text: 'Ok',
      handler: () => {
        console.log('Ok clicked');

                    console.log(getElementById('nickname'));

                    // this.menu.swipeEnable(true);
                    // this.nav.pop(Login);
                    // this.nav.setRoot(Index);
      }
    }
  ]
    });

    this.nav.present(alert);
}
 }

推荐答案

离子使用具有双向绑定作为其核心主体的angular。有很多方法可以实现这一点，但一种方法是设置一个html项目的模型。
因此，如果您将输入设置为具有ng模型

Ionic works with angular which has two way binding as its core principal. There are lots of way to accomplish this but one way is to set a model of an html item. So if you set your input to have an ng model

<ion-input type="text" value="" [(ngModel)]="inputName"></ion-input>

然后在您的控制器（班级）中你将拥有

and then in your controller(class) you'll have

this.inputName;

它将保持html的值更改。

It will hold the value changes from html.

这篇关于离子获取文本框值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！