发表于: 2017-04-08 22:08:25
2 1201
今天完成的事:
1.使用ng-repeat获取公司列表并输出出来。
一开始写ng函数报错,看不到问题在哪里,后来在师姐的指正下认识到了问题,函数名后不用多加个括号。ng的语法还是没学好。
定义ng函数定义在$scope上。$scope.xxx=function(){}
2.在师姐的帮助下捋了一遍列表页需要实现的逻辑。
使用ng-repeat把公司列表输出后,还有分页显示,设置首页末页按钮,点击可以跳转到首页和末页;下一页和上一页按钮用来翻页,还有input框用来输入页码,设置一个跳转按钮点击后跳转到指定页数。点击跳转按钮
使用ng-repeat输出的列表里,公司的名称,融资状态都是数字,查看wiki上给的接口汇总,里面给了约定字段。在ng里设置常量,把这些约定的数字和汉字对应起来。
之前以为过滤器都是自带的。。简直大错特错。实际写的时候很多都是需要自定义的。ng自带的过滤器可以去官网api上查有哪些。
关于搜索功能,师姐提醒有一个坑,就是用原生select下拉框不好获取值,可以使用ng-option和ng-selected写。写法参见菜鸟教程。这个功能还没做到,等做到了再来琢磨。
3.在做对登录页的button添加ng-click事件,当点击时,获取双向绑定后的数据,并用$http请求登录接口时,遇到了一些问题。
已给两个用户名和密码框input添加ng-model,在js中打印确认已绑定,但是当点击提交按钮时,返回数据是“无此用户”,状态为连通,并且name:"admin",pwd:"xxxx"值都是对的。使用postman测试接口是通的。
当时的写法(错误):
var aaa = {name: $scope.iUser, pwd: $scope.iPwd};$http.post('xxxx', aaa)
// .then(function (res) {
// var mesAll = angular.fromJson(res);
// var mes = mesAll.data;
// console.log(mes);
// if (mes.message == 'success') {
// $state.go('asideBar');
// console.log("jump!start");
// }
// });
在师兄师姐们的帮助下,学到了很多。
①angular不可以直接prase(jsonName)来解析json对象,需要用angular.fromJson()来解析。
作用:字符串转json对象
参数:string:字符串
返回值:json对象.
var json = angular.fromJson('{"name":"xxx","age":34}');
console.log(json); //$ Object {name: "xxx", age: 34}
_________________________________-
反向转换成json方法
angular.toJson(json,pretty)
pretty:boolean number 控制字符串输出格式
返回值:字符串
参考网址:https://segmentfault.com/a/1190000002625738
②师兄提议使用这种写法,
'/xxxxx?name='+$scope.iUser+'&pwd='+$scope.iPwd
登录成功,查看network里的返回值可发现,与之前区别在于,用户名与密码格式为 name:xxxx,pwd:xxxx。没有双引号。
后来在师姐的指点下才知道ng的.post()方法解析这个坑。
如果想要使用 $http.post('url',data).then(function(){})这种写法,需要进行配置。
首先使用$.param()对传递的参数序列化。然后需要对header进行配置:
$http({
method:'post',
url:'xxxxx',
data:$.param(aaa),//aaa={name:$scope.iUser,pwd:$scope.iPwd}
headers:{'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function(req){
console.log(req);
})
之前jq的$http.post()方法,
$.post('do-submit.php', myData, function() {});
同样的写法,ng就接收不到请求的值。原因在于两者的post对header的处理不同。jQuery会把作为JSON对象的myData序列化。
var myData = { a : 1, b : 2 };
// jQuery在post数据之前会把myData转换成字符串:"a=1&b=2"
angular不会。
headers:{'Content-Type': 'application/x-www-form-urlencoded'}
这一行代码是将ng对header的解析变为:
'/xxxxx?name='+$scope.iUser+'&pwd='+$scope.iPwd
正确的
$http({
method: 'post',
url: 'xxxxxx',
data: $.param(aaa)
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function (res) {}
})
为了方便以后的管理,可以单配置一个解析文件。
参考:http://blog.csdn.net/fengzijinliang/article/details/51897991
http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/
明天要做的事:给公司列表输出加好对应的后台字段。做翻页功能。
遇到的问题:ng的$http.post()方法对数据的接受问题。
收获:如上。感谢今天所有帮忙的师姐们&师兄们
评论