我正在使用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))但每次都未定义。
我做错了什么?