发表于: 2017-07-21 23:42:48
1 830
一、今天完成的事:
1.学习angular的表单验证;
2.实现新增页面的表单验证和不输入完整点击上传功能;
3.搜索的时候同一天的时间冲突,无法实现搜索,更改后正常;
4.优化翻页功能,点击正常,禁止点击也正常;
二、明天的计划:
1.整理优化页面;
三、遇到的问题:
1.测试时发现时间获取同一天的时候,点击搜索无效,询问师兄知,同一天的时候将后一天增加23小时59分,然后搜索发现会一直添加,加判断条件后,搜索正常;
2.添加表单验证的时候,发现input中type为file的无法通过内容验证,询问师兄后发现可以验证img中返回的src标签;
3.翻页功能在最后一页的时候,无法将末页禁止点击,查看后发现需要将total传参,然后根据total点的是否是最后一页,然后将末页禁用;
四、收获:
1、时间为同一天的时候,将后一天加上23小时59分,避免时间无效,注意不能一直加23小时59分,需要添加判断条件,只在第一次的时候加;
//用Date.parse()方法,将获取到的时间转化为时间戳
$scope.params.startAt = Date.parse($scope.startAt);
$scope.params.endAt = Date.parse($scope.endAt);
//转化为时间戳之后,是带毫秒的,将结束时间增加23小时59分钟59秒999毫秒
if ( $stateParams.endAt == undefined) {
$scope.params.endAt = $scope.params.endAt + 1000*60*60*24 - 1;
}
2、优化翻页功能,实现判断页面禁用不同按钮;
<li ><button class="btn btn-primary" ng-disabled="firstPage" ng-click="currentPage(1)">首页</button></li>
<li ><button class="btn btn-primary" ng-disabled="lastPage" ng-click="currentPage(n-1)">< 上一页</button></li>
<li ng-repeat="x in articlePage" ><button class="btn btn-primary" ng-click="currentPage(x)">{{x}}</button></li>
<li><button class="btn btn-primary" ng-disabled="nextPage" ng-click="currentPage(n+1)">> 下一页</button></li>
<li><button class="btn btn-primary" ng-disabled="endPage" ng-click="currentPage(articleNum)">末页</button></li>
if ($stateParams.page == 1 ) {
$scope.firstPage = true;
$scope.lastPage = true;
$scope.nextPage = false;
$scope.endPage = false;
}else if ($stateParams.page == $stateParams.total){
$scope.nextPage = true;
$scope.endPage = true;
$scope.firstPage = false;
$scope.lastPage = false;
3、添加表单验证,根据表单的必填项来禁用按钮,只有当都填写完成后,才能点击上线和草稿;
注意url和src的判断;
<input name="url" type="url" class=" form-control" ng-model="addParams.url" required>
<span style="color:red" ng-show="form.url.$error.required">内容不能为空!</span>
<span style="color:red" ng-show="form.url.$error.url">不符合url格式!</span>
<span style="color:red" ng-show="!src">请选择图片!</span>
4、注意按钮实现点击的条件。较为复杂;
<button type="button" class="btn btn-success" ng-click="upload(2)" ng-disabled="form.title.$error.required || form.type.$error.required || (addParams.type == 3 && form.industry.$error.required) || form.url.$error.required || form.url.$error.url || (!src)">立即上线</button>
<button type="button" class="btn btn-success" ng-click="upload(1)" ng-disabled="form.title.$error.required || form.type.$error.required || (addParams.type == 3 && form.industry.$error.required) || form.url.$error.required || form.url.$error.url || (!src)">存为草稿</button>
评论