离子获取文本框值答案

【问题标题】：ionic getting textbox value离子获取文本框值
【发布时间】：2017-10-15 16:13:45
【问题描述】：

您好，我是 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);
}
 }

【问题讨论】：

标签： javascript ionic-framework ionic2

【解决方案1】：

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

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

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

this.inputName;

它将保存来自 html 的值更改。

【讨论】：

感谢它的工作！我可以知道为什么我的 ngmodel 必须在一个对象中吗？
在这个例子中它不是一个对象。你的意思是为什么它应该作为一个属性在控制器中？如果您愿意，可以在 Angular 1 docs.angularjs.org/tutorial/step_04 中阅读有关此内容的信息
谢谢！再多一个qns！是否可以在下一页获得相同的名称？
不使用 ng 模型，因为每个页面都有自己的数据范围。但是，如果您真的想要，您可以使用您的 NavController 传递您的数据，例如 this.nav.push(SecondView, { paramUser: user }); （不要忘记设置导航控制器的路由以使其成为可能）阅读更多：ionicframework.com/docs/v2/api/components/nav/NavController
如何获得价值，如果离子输入是使用 *ngFor 动态创建的

【解决方案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);

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

【讨论】：

嗨，我已经尝试过了，但是它不适用于我的情况。我需要初始化角度吗？

【解决方案3】：

使用这个：

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

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

例如：。

在你的情况下variable-to-bind 是username，你可以像$scope.username 一样访问它

【讨论】：