发表于: 2017-04-08 22:08:25

2 1204


今天完成的事:

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)

作用:json对象转字符串。参数:json:json
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()方法对数据的接受问题。

收获:如上。感谢今天所有帮忙的师姐们&师兄们



返回列表 返回列表
评论

    分享到