发表于： 2017-04-18 20:58:45
1 1129
今日完成：
基本完成任务七，由于晚饭时任务七的接口和页面样式改了，剩余一些样式需要调一下，数组的重新复制还有一部分未完成。
明日计划：
调试完成任务七，开始任务八
问题：
1.AngularJS $http 不生效。 提示：$http is not defined 。 查了资料是因为没有在函数中绑定参数，我的写法是
fuction（）{
$http
.....
}
应该改为：fuction（$http）{
$http
.....
}。
但是改了之后，依然有错误提示：$http is not a function。 调试了很久，最后发现我没有把$http绑定到控制器中，而是直接在执行函数值调用 ：
var app =angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.id_="";
$scope.pwd_="";
$scope.res="";
$scope.login=function($http){$http
({
修改为：
var app =angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http){
$scope.id_="";
$scope.pwd_="";
$scope.res="";
$scope.login=function(){
$http({
。。。。}问题解决。
2.用angular重写了登录页，但是无论发送什么数据，都返回“用户不存在”。查资料并逐步调试，发现之前用原生js和jq 的ajax 时，浏览器调试工具的network显示发送的数据格式为form data。 但是angular发送的数据为request playload。 后台服务器应该没有专门对这种格式进行解析，所以接收不到我发送的值。
在代码中增加定义格式的代码：
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
问题解决。
3.为表单添加angular表单验证时，一直不生效。查了资料发现，我访问表单的定位是：
<form name>.<angular property>。但是angular的要求是：
<form name>.<input name>.<angular property>
于是重新在页面父盒子外加入form重新定位，问题解决。
收获：
1.学习了angular $http、表单验证、ng-modle双向绑定、ng-repeat等概念并运用；
2.重新复习了正则的知识；
3.熟悉了angular的语法及表达方法。
4.关于angular表单验证的细节：
某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：
验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：
使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：
验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：
<input type="email" name="email" ng-model="user.email" />
验证输入内容是否是数字，将input的类型设置为number
返回列表
评论