Onsen UI formData undefined

时间:2015-02-24 17:22:56

标签: javascript angularjs forms onsen-ui

我正在使用Onsen UI创建我的第一个应用程序,我无法使我的表单工作。我希望能够注册并登录用户。

var module = angular.module('app', ['onsen']);

  module.controller('AppController', function($scope, $data) {
    
    $scope.signupForm=function(){
        alert(angular.toJson($scope.regf));
    }
    
    $scope.loginForm=function(){
        alert(angular.toJson($scope.logf));
    }
  });
<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

  <title></title>  
  
  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
  <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css"> 
  <link rel="stylesheet" href="styles/app.css"/> 
  
  <script src="lib/onsen/js/angular/angular.js"></script>    
  <script src="lib/onsen/js/onsenui.js"></script>    
  <script src="js/jquery-2.1.3.min.js"></script>
  
  <script src="cordova.js"></script>  
  <script src="js/app.js"></script>  
  <script>
    ons.ready(function() {
    });
  </script>

</head>

<body ng-controller="AppController"> 

<ons-sliding-menu
  main-page="welcome.html"
  menu-page="menu.html"
  side="left"
  var="menu">
</ons-sliding-menu>   

<ons-template id="welcome.html">
...
</ons-template>
  
  <ons-template id="login.html">
   <form id="logf" name="logf" novalidate ng-submit="loginForm()">
    <ons-page>    
	    <ons-toolbar class="toolbar">
	      	<div class="left"><ons-toolbar-button onclick="menu.setMainPage('welcome.html', { animation : 'slide' })"><ons-icon icon="ion-chevron-left"></ons-icon></ons-toolbar-button></div>
		    <div class="center">Login</div>
		    <div class="right"><button id="subl" type="submit" ng-disabled="logf.$invalid"><ons-icon icon="ion-checkmark"></ons-icon></button></div> 
    	</ons-toolbar>

	  <ons-list style="margin-top: 40px;">
         <ons-list-item>
          <ons-row>
            <ons-col width="50px"> 
              <ons-icon icon="ion-email"></ons-icon>
            </ons-col>
            <ons-col>
              <input type="email" name="email" ng-model="email" placeholder="Email">
            </ons-col>
          </ons-row>          
        </ons-list-item>        
        <ons-list-item>
          <ons-row>
            <ons-col width="50px"> 
              <ons-icon icon="ion-asterisk"></ons-icon>
            </ons-col>
            <ons-col>
              <input type="password" ng-model="password" placeholder="Password"  ng-minlength=4 ng-maxlength=20 required>
            </ons-col>
          </ons-row>
         </ons-list-item>
      </ons-list>
      <div class="centerlink"><a href="">Forgot password?</a></div>      
     </ons-page>
     </form>
  </ons-template>
  
  
  <ons-template id="register.html">
  <form id="regf" name="regf" novalidate ng-submit="signupForm()">
    <ons-page>
        <ons-toolbar class="toolbar">
	      	<div class="left"><ons-toolbar-button onclick="menu.setMainPage('welcome.html', { animation : 'slide' })"><ons-icon icon="ion-chevron-left"></ons-icon></ons-toolbar-button></div>
		    <div class="center">Register</div>
		    <div class="right"><button id="subm" type="submit" ng-disabled="regf.$invalid"><ons-icon icon="ion-checkmark"></ons-icon></button></div>  
    	</ons-toolbar>
        <ons-list style="margin-top: 40px;">
        <ons-list-item>
          <ons-row>
            <ons-col width="50px"> 
              <ons-icon icon="ion-email"></ons-icon>
            </ons-col>
            <ons-col>
              <input type="email" name="email" ng-model="email" placeholder="Email" required>
            </ons-col>
          </ons-row>          
        </ons-list-item>        
        <ons-list-item>
          <ons-row>
            <ons-col width="50px"> 
              <ons-icon icon="ion-asterisk"></ons-icon>
            </ons-col>
            <ons-col>
              <input type="password" name="password" ng-model="password" placeholder="Password"  ng-minlength=4 ng-maxlength=20 required>
            </ons-col>
          </ons-row>
         </ons-list-item>
         <ons-list-item>
                <ons-row>
                    <ons-col width="50px">
                        <ons-icon icon="ion-man"></ons-icon><ons-icon icon="ion-woman"></ons-icon>
                    </ons-col>
                    <ons-col>
	                    <label class="radio-button">
	                        <input type="radio" name="gender" ng-model="gender" value="male" ng-required="!gender">
	                        <div class="radio-button__checkmark"></div>
	                        Male
	                    </label>
	                    <label class="radio-button">
	                        <input type="radio" name="gender" ng-model="gender" value="female" ng-required="!gender">
	                        <div class="radio-button__checkmark"></div>
	                        Female
	                    </label>
                    </ons-col>
                </ons-row>
         </ons-list-item>
         <ons-list-item>
	          <ons-row>
	            <ons-col width="50px"> 
	              <ons-icon icon="ion-calendar"></ons-icon>
	            </ons-col>
	            <ons-col>
	              <input type="text" onfocus="(this.type='date')" placeholder="Birthday" name="bday" ng-model="bday" required class="text-input" required>
	            </ons-col>
	          </ons-row>          
        </ons-list-item> 
            <ons-list-item>
          <ons-row>
            <ons-col width="50px"> 
              <ons-icon icon="ion-chatboxes"></ons-icon>
            </ons-col>
            <ons-col>
              <select class="text-input text-input--transparent" ng-model="lang" name="lang" required> 
                <option value="" disabled>Language</option>
              	<option value="en">English</option> 
              	<option value="ru">Russian</option> 
              </select> 
            </ons-col>
          </ons-row>
         </ons-list-item>
      </ons-list>     
     </form>
  </ons-page>    
</ons-template>
<script type="text/ons-template" id="menu.html">
  <ons-list>
    <ons-list-item onclick="menu.setMainPage('welcome.html', {closeMenu: true})">
      Login/Register
    </ons-list-item>
    <ons-list-item onclick="menu.setMainPage('welcome.html', {closeMenu: true})">
      Help
    </ons-list-item>
  </ons-list>
</script>
</body>  
</html>

我已尝试过alert(angular.toJson($ scope.regf))和alert(angular.toJson($ scope.formData))但每次都未定义。

我做错了什么?

0 个答案:

没有答案