-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo31.html
75 lines (73 loc) · 2.94 KB
/
demo31.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Angular Forms</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
</script>
</head>
<body ng-app="myApp">
<div class="container">
<div class="col-md-6 col-md-offset-3" ng-controller="aaa">
<div class="page-header">
<h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1>
</div>
<div id="messages" ng-show="message">{{ message }}</div>
<form ng-submit="processForm()">
<div id="name-group" class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model = "formData.name">
<span class="help-block" ng-show="errorName">{{ errorName }}</span>
</div>
<div id="superhero-group" class="form-group">
<label>Superhero Alias</label>
<input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias">
<span class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</span>
</div>
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</form>
<p>
<pre>
{{ formData }}
</pre>
</p>
</div>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
// var app = angular.module('myapp', []);
app.controller("aaa",function aaa($scope , $http){
$scope.formData = {}; // 默认为空
$scope.processForm = function() {
$http({
method : 'POST',
url : 'demo31.php',
data : $.param($scope.formData), // $.param() 序列化数组
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function(data) {
console.log(data);
if (!data.success) {
$scope.errorName = data.errors.name;
$scope.errorSuperhero = data.errors.superheroAlias;
$scope.message = ""; // 第一次提交正确连续第二次提交错误时 隐藏 success 提示
} else {
$scope.message = data.message;
// 第一次提交错误,连续第二次提交正确时 隐藏下面的错误提示。
// 原理是 把input框致空,为假,则 ng-show 不显示。 其实可以用一个公用的开始设置为假,然后真假切换也可以。
$scope.errorName = "";
$scope.errorSuperhero = "";
}
});
};
});
</script>
</body>
</html>