[아이오닉] ionic에서 input 태그의 내용 확인하기

아이오닉에서 input 태그의 내용을 alert로 확인하는 방법

먼저 html 내용이 다음과 같다고 생각해본다.

사용자 이름을 입력하는 input 태그와 비밀번호를 입력하는 input 태그가 있고,

input의 내용을 받아서 로그인을 실행하는 doLogin() 함수를 실행하는 Login 버튼이 있다.

<label class="item item-input">
    <span class="input-label">UserName</span>
    <input  ng-model="username" type="text" placeholder="Email">
</label>

<label class="item item-input">
    <span class="input-label">Password</span>
    <input  ng-model="password" type="password" placeholder="Your Password">
</label>

<button class="button button-positive" ng-click="doLogin()">  Login </button>

모델을 사전에 정의해두는 방법을 이용하면 된다.

위의 html에 'loginCtrl' controller이 걸려 있다면 사전에 ng-model에 대한 내용을 정의하고, 이를 불러와서 쓸 수 있다.

아래의 코드에서, loginCtrl controller가 미리 ng-model인 username을 정의해두고, 로그인 버튼을 눌렀을 때, input에 작성된 username을 가져와 alert로 보여주는 걸 알 수 있다.

blog.config(function($stateProvider,$urlRouterProvider){
    $stateProvider
        .state('mainlist',{
        url:'/mainlist',
        templateUrl:'templates/MainList.html',
        controller:'listCtrl'
    })
        .state('login',{
        url:'/login',
        templateUrl:'templates/login.html',
        controller:'loginCtrl'
        });


blog.controller('loginCtrl',function($scope)
                {

                        $scope.username = "";
                        $scope.doLogin=function()
                        {
                            var username= $scope.username;
                            alert(username);
                        }

                    }
               );