发表于: 2017-06-15 23:42:43
1 921
1、完成状态、类型输入框的绑定传参及搜索。
<select ng-model="sta"> //双向绑定
<option value="">全部</option> //value设定对应值,匹配后端原始数据
<option value="2">上线</option>
<option value="1">草稿</option>
</select>
2、完成分页设置及单页跳转,前后页面跳转。
$scope.pageNum=function () { //点击页码跳转函数
$scope.page=event.target.innerHTML; //点击元素的值,赋给page(后面传参)
$scope.enterPage(); //执行一次确认跳转
}
$scope.prevPage=function () { //上一页跳转函数
if($scope.page>1){ //从第二页开始,具有执行功能
$scope.page=$scope.page-1; //页码减一并赋值
$scope.enterPage(); //执行跳转,下一页同。
}}
页码按钮的html
<button class="page" ng-repeat="a in pageTotal" ng-click="pageNum()">{{$index + 1}}</button>
其中pageTotal为后端列表总行数(total)与当前自己设置每页几行(size)的比值取上浮,并设置为数组。
3、传参部分,根据后端接口,成功后返回一个函数并渲染到页面。
$http.get("/carrots-admin-ajax/a/article/search?" + "page=" +$scope.page + "&size="+$scope.size + "&type="+$scope.type+ "&status="+$scope.sta)
4、清空函数是将type和status赋值为空,并执行确认搜索函数。
收获:算是比较完整的进行了一遍后端进行搜索传参的过程,知识点get。
困难:当前页码的变色没做好,然后上下搜索和确定按钮事件是绑定在一起的,感觉跟实际正常体验有点出入,可能需要分开写点击函数并传参。
计划:完成剩下的,时间框是绑定和传参(好像需要用到angular的插件),完成任务8。
评论