Angularjs模型不从视图输入字段更新?

时间:2016-07-04 07:22:35

标签: angularjs ionic-framework

我试图从输入字段中获取用户名并传递给该函数以创建用户帐户,但该字段中的用户名输入似乎在模型中更新。 enter image description here

我使用window.alert显示用于测试目的的用户名。

的login.html

ion-view view-title="Login">
    <ion-content>

         <div class="list list-inset" padding>

            <div class="item-divider" align="center"> Login</div>

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

        </div>
         <center><button class="button button-positive " ng-click="log()">Login</button> </center>

app.js (不是整个代码)

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.log=function()
                        {
                            var username= $scope.username;
                            window.alert(username);
                        }

                    }
               );

2 个答案:

答案 0 :(得分:0)

首先需要定义模型。将您的代码更改为此代码,它应该可以工作(未经过测试):

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.log=function()
                        {
                            var username= $scope.username;
                            window.alert(username);
                        }

                    }
               );

答案 1 :(得分:0)

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

<强> app.js

blog.controller('loginCtrl',function($scope)
            {
                    $scope.data={};
                    $scope.log=function()
                    {
                        var username= $scope.data.username;
                        window.alert(username);
                    }

                }
           );

enter image description here