发表于: 2017-05-11 22:50:42
1 932
今天完成的事情:
1.完成翻页的基本功能,但还是有些bug需要修复一下。
2.学习$location知识。
明天计划的事情:
1.完成翻页功能。
2.完成日期功能。
遇到的困难:
1.在制作翻页功能过程中,一开始就遇到了一个问题,就是如何拼接url字符串。后来参考了师兄的url代码才发现,原来可以以直接拼接字符串的形式来构建一个新的url地址。比如说我url为
url:'/carrots-admin-ajax/a/article/search'
如果要实现翻页效果,则需要在尾部添加?page="activePage"&size="size";就能够达到翻页效果,所以我就在控制器中添加了$scope.activePage和$scope.size这两个参数。$scope.activePage代表的是当前页数;$scope.size代表的是一页有几行数据。然后就能得到如下的拼接后的url
url: '/carrots-admin-ajax/a/article/search?page=' + $scope.activePage + "&size=" + $scope.size
2.字符串拼接完之后,然后又发现一个问题,到底怎么样才能够实现点击页数,然后跳转到指定页面,然后通过url跳转到该页面下的数据。
之前准备新建一个控制器controller,然后再使用$http进行跳转,后来发现这样不行,因为这样做的话$scope.activePage值超出了作用域而变成underfined,从而导致报错。
后来就想到其实不用那么麻烦,可以通过ng-click="goPage()"方法来实现页面跳转功能,当用户点击页面数字时,触发goPage()事件;
然后利用$http请求实现url的跳转。这样的话通过改变$scope.activePage的值,简单的翻页功能基本上可以实现,但是这样会有些bug需要解决,比如说点击到第一页时,我再点击上一页,$scope.activePage的值会变成0;到点击最后一页,点击下一页,然后出来一个新的页面。。。
$scope.goPage = function (i) {
$http({
method:"get",
url: '/carrots-admin-ajax/a/article/search?page=' + $scope.activePage + "&size=" + $scope.size
}).success(function (d) {
$scope.datas = d.data.articleList;//从后台获取articleList值
});
$location.search({page:$scope.activePage,size:$scope.size});//获取url字段
};
收获:
1.学会了简单的翻页功能,但是有些地方还是需要完善。明天解决这些bug
2.学习了$location属性,就是任何时间当需要改变url或者跳转的情况下,就需要运用$location属性改变url字符串,在分页中,我是利用了$location.search方法改变url的字符串,从而达到url可以reload效果。
评论