2016-06-07 3 views
1

안녕하세요 저는 이온 성이 매우 좋으며 다음 html 및 js 코드가 있습니다. 단추를 클릭하면 텍스트 입력란에 사용자 입력 값을 가져 오려고합니다. 내의 .js 코드 다음ionic get textbox value

<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> 

(가능하다면 같은 세션에 걸쳐 사용을 할 수 있도록, 내가 개체 또는 로컬 캐시에 저장할 싶습니다)

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

답변

5

이오니아는 양면 결합을 핵심 원리로하는 각을 가지고 작용합니다. 이 작업을 수행하는 방법은 많이 있지만 한 가지 방법은 html 항목의 모델을 설정하는 것입니다. 당신이 NG 모델을 컨트롤러 (클래스)에서 다음

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

과를 가지고 입력을 설정 그렇다면 당신은

this.inputName; 

그것은 HTML에서 값의 변화를 개최해야합니다.

+0

감사처럼 액세스 할 수 username입니다! 내 ngmodel이 왜 객체에 있어야 하는지를 알 수 있습니까? –

+0

이 예제에서는 객체가 아닙니다. 왜 그것이 그 재산으로 컨트롤러에 있어야한다는 것을 의미합니까? 원하는 경우 각도 1에서 이에 대해 읽을 수 있습니다. https://docs.angularjs.org/tutorial/step_04 – misha130

+0

감사합니다! 한 번 더 qns! 다음 페이지에서 같은 이름을 지을 수 있습니까? –

2

나는 ionic2에 대해 잘 모르지만, 이온 성 1에서 우리는 아래와 같이 할 수 있습니다 : 여기

이로 사용 입력 텍스트의 값을 저장하고 JS 파일에

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

을 반대하는 예입니다

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

이 대답을 확인하면 항상 나를 위해 작동합니다.

+0

안녕하세요. 그러나이 방법을 시도했지만 내 경우에는 효과가 없습니다. 각도를 초기화해야합니까? –

0

사용이 :

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

당신은 $scope를 사용하여 컨트롤러에서 variable-to-bind에 액세스 할 수 있습니다.

예 :. 귀하의 경우 variable-to-bind

  • 는 당신이 일을 $scope.username