离子获取文本框值

Question

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

<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);
}
 }

Answer 1

Ionic 与 angular 一起工作，后者以双向绑定作为其核心原则。有很多方法可以实现这一点，但一种方法是设置 html 项目的模型。因此，如果您将输入设置为具有 ng 模型

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

然后在您的控制器中（class）您将拥有

this.inputName;

它将保留 html 的值变化。

Answer 2

我不确定 ionic2，但在 ionic 1 中我们可以这样做：

这是一个将使用输入文本的值存储到对象中的示例

<input type="text" ng-model="username">
<input type="text" ng-model="password">
<button class="button"ng-click="login(username,password)"> submit</button>

在你的 js 文件中

$scope.login= function(username,password){
   console.log(username);
   console.log(password);
var loginUser = {
     "username":username,
     "password":password
};
console.log(loginUser);

检查这个答案，它总是对我有用。

Answer 3

使用这个：

<input type="text" name="input name" ng-model="variable-to-bind" />

您可以使用 $scope 从控制器访问 variable-to-bind。

例如：.

在你的情况下 variable-to-bind 是 username，你可以像 $scope.username

离子获取文本框值

ionic getting textbox value

javascript

ionic-framework

ionic2