ng-submit angular js在php中不起作用
[英]ng-submit angular js not working in php
问题描述
在下面的代码中，只有角度验证有效。 当我单击登录按钮时，则没有角度脚本起作用。 可以帮助我吗？ 我的错误在哪里？
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Talkiedo</title>
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrapValidator.min.css" rel="stylesheet">
<link href="assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<link href="assets/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/style.css" rel="stylesheet">
<script src="assets/bootstrap/js/angular.js"></script>
<script src="assets/bootstrap/js/angular-route.min.js"></script>
<script src="assets/bootstrap/js/angular-resource.min.js"></script>
<script src="assets/bootstrap/js/angular-messages.js"></script>
<script src="loginController.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
\\\
<![endif]-->
<style>
.form-group.required .control-label:after {
content:"*";
color:red;
}
</style>
</head>
<body style="background-color:#EEF2F5;" ng-app="loginApp" ng-controller="loginController">
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-4 col-md-4 well" style="padding-left:50px;padding-right:50px">
<h1>Login</h1>
<form class="form-horizontal" name="adminForm" role="form" ng-submit="submitLogin()" novalidate="novalidate">
<div class="form-body">
<div class="form-group required" ng-class="{'has-error': adminForm.admin_username.$touched && adminForm.admin_username.$invalid }">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<input type="email" class="form-control" name="admin_username" id="admin_username" ng-model="admin.admin_username" required style="padding-top: 0px;" placeholder="Enter Your Email Id">
</div>
<div class="help-block" ng-messages="adminForm.admin_username.$error" ng-if="adminForm.admin_username.$touched && adminForm.admin_username.$invalid" >
<p ng-message="required">Your email is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{'has-error': adminForm.admin_password.$touched && adminForm.admin_password.$invalid }">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<input type="password" class="form-control" name="admin_password" id="admin_password" ng-model="admin.admin_password" required style="padding-top: 0px;" placeholder="Enter Your Password">
</div>
<div class="help-block" ng-messages="adminForm.admin_password.$error" ng-if="adminForm.admin_password.$touched && adminForm.admin_password.$invalid" >
<p ng-message="required">Your Password is required.</p>
</div>
</div>
<span class="help-block" id="wrong_password" name="wrong_password"></span>
<div class="form-group">
<div class="input-group">
<div class=" col-sm-6">
<button type="button" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
</div>
<div class="col-sm-6">
<button type="" class="btn btn-default btn-cancel center-block">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="assets/jquery/jquery-2.1.4.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrapValidator.min.js"></script>
<script src="assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js"> </script>
<script src="assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/js/bootbox.min.js"></script>
<script src="assets/js/custome.js"></script>
</body>
</html>
AngularJS代码：
// Defining angularjs application.
var loginApp = angular.module('loginApp', ['ngMessages']);
// Controller function and passing $http service and $scope var.
loginApp.controller('loginController', function($scope, $http) {
// create a blank object to handle form data.
$scope.admin = {};
// calling our submit function.
$scope.submitLogin = function() {
// Posting data to php file
alert('dasdas');
if ($scope.adminForm.$valid) {
$http({
method : 'POST',
url : 'http://localhost/talk/admin/login',
data : $scope.admin, //forms user object
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
if (data.errors) {
// Showing errors.
// $scope.errorName = data.errors.address1;
// $scope.errorUserName = data.errors.address2;
// $scope.errorEmail = data.errors.address13;
} else {
$scope.message = data.message;
}
});
}else {
alert("There are invalid fields");
}
};
});
3 个解决方案
解决方案1
1 2016-07-08 15:48:34
问题在于您的按钮不是提交，而是普通按钮，因此它不会触发提交操作。
尝试更改提交按钮的类型以submit
解决方案2
1 已采纳 2016-07-08 15:53:51
我认为你必须改变
<button type="button" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
带提交类型按钮
<button type="submit" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
所以你可以提交你的表格
解决方案3
0 2016-07-08 15:38:59
如果要使用jQuery提交表单，则可以执行$('.formClass').submit
ng-submit在Laravel PHP框架中不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.