如何使用Ionic返回文本框的值?

时间:2014-12-02 15:01:28

标签: javascript angularjs ionic-framework

我在Ionic中有一个表单,我正在尝试返回文本框的值,但是我遇到了问题。表格的其余部分是加载和注册'返回到控制台。 formData.email未绑定在模板中,当我输入内容并单击按钮时,也没有任何内容返回到控制台。

有关如何做的任何建议?

signup.html

<!-- Header -->
<div class="bar bar-header bar-light">

  <button class="button icon-left ion-chevron-left button-clear button-dark">Back</button>

  <h1 class="title">Signup</h1>
</div>

<!-- Space between header and signup form -->
<div class="spacer" style="width: 300px; height: 50px;"></div>


<div class="list list-inset">

    <!-- Signup form text fields -->
    <form>

        <label class="item item-input">
            <span class="input-label">Email</span>
            <input type="email" ng-model="formData.email">
        </label>



        <label class="item item-input">
        <span class="input-label">Username</span>
        <input type="text">
        </label>

        <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password">
        </label>

        <!-- Submit button for signup form -->
        <button on-touch="onTouch()" class="button button-positive button-block">
            Sign up
        </button>

    </form>
</div>

{{formData.email}}

controllers.js

.controller('SignupCtrl', function($scope, $ionicLoading, $state, $stateParams){
    console.log('signup');

    $scope.formData = {};

    //Go to the guessing page
    $scope.onTouch = function(item,event){
        console.log($scope.formData.email);
    };



});

1 个答案:

答案 0 :(得分:3)

您正在做的事情是正确的,我唯一可以做的就是重新创建这个,如果您还没有输入有效的电子邮件地址,则返回未定义。这是Angular内置的验证功能,与Ionic无关。您可以在此处找到有关此内容的更多信息:https://docs.angularjs.org/api/ng/input/input%5Bemail%5D