Question

您好我是离子新手，我有以下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>

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

this.inputName;

它将保留html的值更改。

Answer 2

我不确定离子2，但在离子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" />

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

例如： 。

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

离子获取文本框值

3 个答案: