Question

我正在研究离子框架。我正在尝试创建一个登录页面。我想读取用户名中插入的数据并在login.html中传递单词字段。我试图使用$ scope读取但是没有我尝试使用console.log（）在控制台中打印变量但是我收到一个错误，说它是＆＃34;未定义＆＃34;。我是离子和angularjs的新手。

的login.html：

<ion-view view-title="Login" name="menuContent">
<ion-header-bar>
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<form >
  <div class="list">
    <label class="item item-input item-stacked-label">
    <span class="input-label">Username</span>
    <input type="text" ng-model="user" placeholder="Email or Phone">
    </label>
    <label class="item item-input item-stacked-label">
    <span class="input-label">Password</span>
    <input type="text" ng-model="pass" placeholder="Password">
    </label>
    <label class="item">
    <button class="button button-block button-positive" type="submit" ng-click="loginNew()">Log in</button>
    </label>
    <label class="item">
    <span class="input-label">New user?</span>
     <button class="button button-block button-positive"   ng-click="signNew()">Signup</button>
    </label>

  </div>
</form>
</ion-content>
</ion-view>

app.js：

.state('app.login', {
    url: "/login",
    views: {
      'menuContent': {
        templateUrl: 'templates/login.html',
        controller: 'LoginCtrl'
      }
    }
  })
  .state('app.signup', {
    url: '/signup',
    views: {
      'menuContent': {
        templateUrl: 'templates/signup.html',
        controller: 'SignupCtrl'
      }
    }
  })

controller.js：

//start LoginCtrl
.controller('LoginCtrl', ['$scope','$state','$http' , function($scope,$state,$http) {
$scope.signNew=function(){
console.log("sas");
$state.go('app.signup');
console.log("sas");
};
$scope.loginNew = function($scope){
        console.log($scope.user+"   daww");
        console.log($scope.pass);
        $http.get("http://demo.pillocate.com/webservice/Login?Username="+$scope.user+"&Password="+$scope.pass)
            .success(function(data) {    
            alert("Login was Successful.");
            console.log("Login success" + data);
            })
            .error(function(data) {
            alert("Wrong Credentials!!Username or Password was Wrong.")
            });

}
}])
//end LoginCtrl
//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------//
//start SignupCtrl
.controller('SignupCtrl', ['$scope',  function($scope) {


}]);
//end SignupCtrl

Answer 1

当您在HTML中使用表单时，请转到 ng-submit 而不是 ng-submit ng-click ，因为ng-click不会验证您的HTML。 示例：如果您在输入框中使用required，则ng-click不验证必需，因此请使用的 NG-提交

请参阅此文档ng-submit

注意：使用 ng-submit 不是必须的，这是最好的我们必须遵循的做法

根据你的问题，你必须从html传递一个对象并在控制器中获取此对象。它会解决你的问题。

的
的
<form ng-submit="loginNew(login)"> <div class="list"> <label class="item item-input item-stacked-label"> <span class="input-label">Username</span> <input type="text" ng-model="login.user" placeholder="Email or Phone"> </label> <label class="item item-input item-stacked-label"> <span class="input-label">Password</span> <input type="text" ng-model="login.pass" placeholder="Password"> </label> <label class="item"> <button class="button button-block button-positive" type="submit" >Log in</button> </label> <label class="item"> <span class="input-label">New user?</span> <button class="button button-block button-positive">Signup</button> </label> </div> </form>

的

现在在控制器中：

的
的
$scope.loginNew = function(mylodinObject){ console.log(mylodinObject.user+" daww"); console.log(mylodinObject.pass); $http.get("http://demo.pillocate.com/webservice/Login?Username="+mylodinObject.user+"&Password="+mylodinObject.pass) .success(function(data) { alert("Login was Successful."); console.log("Login success" + data); }) .error(function(data) { alert("Wrong Credentials!!Username or Password was Wrong.") }); }

的

有时候如果你想同时使用ng-click和ng-submit，那么你就会遇到问题，所以对于这个链接它会解决你的问题：ng-click and ng-submit

Answer 2

按如下方式设计表格

<form >
     <div class="list">
       <label class="item item-input item-stacked-label">
           <span class="input-label">Username</span>
           <input type="text" ng-model="xxx.user" placeholder="Email or Phone">
        </label>
        <label class="item item-input item-stacked-label">
          <span class="input-label">Password</span>
          <input type="text" ng-model="xxx.pass" placeholder="Password">
       </label>
       <label class="item">
         <button class="button button-block button-positive" type="submit" ng-click="loginNew(xxx)">Log in</button>
      </label>
    </div>
</form>

并在控制器中

 $scope.loginNew = function(xxx){
     console.log(xxx); // this gives the user and pass variables from form 
     console.log(xxx.user); //for user
     console.log(xxx.pass); //for pass
};

Answer 3

$(document).ready(function() {
$('TD.green.center').filter( function(){ return $(this).text().length<3; } ) .parent().hide()
});

如何读取ng-model中插入的数据？

3 个答案: