发表于: 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效果。


返回列表 返回列表
评论

    分享到