发表于: 2017-06-01 23:26:48
1 1166
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
重构分页中的自定义指令
明天计划的事情:验证(一定要写非常细致的内容)
解决编辑和新增页面的表单验证
遇到的问题:(遇到什么困难,怎么解决的)
分页自定义指令JavaScript 判断显示HTML分页按钮
//是否有下一页
function isHaveNextPage() {
return !(activePage === totalPage);
}
//是否有上一页
function isHavePrePage() {
return activePage !== 1;
}
//是否有前面的 ...
function isHavePreDot() {
return activePage - 1 > 4;
}
//是否有后面的 ...
function isHaveNextDot() {
return activePage < totalPage - 4;
}
//获得pageList
function getPageList() {
var pageList = [];
//...在两边
if (isHavePreDot() && isHaveNextDot()) {
for (var i = 0; i < 5; i++) {
pageList.push(activePage + i);
}
pageList.unshift('...');//在数组的开头增加一个或多个元素,并返回数组的新长度。
pageList.push('...');//在数组的末尾增加一个或多个元素,并返回数组的新长度。
}
//...在前面
if (isHavePreDot() && !isHaveNextDot()) {
for (var i = totalPage - 4; i <= totalPage; i++) {
pageList.push(i);
}
pageList.unshift('...');
}
//...在后面
if (!isHavePreDot() && isHaveNextDot()) {
if (totalPage > 5) {
for (var i = 0; i < 5; i++) {
pageList.push(activePage + i);
}
} else {
for (var i = 1; i < totalPage; i++) {
pageList.push(i);
}
}
pageList.push('...');
}
//没有...
if (!isHavePreDot() && !isHaveNextDot()) {
for (var i = 1; i <= totalPage; i++) {
pageList.push(i);
}
}
return pageList;
}
function isDisabled(page) {
return Number(page) === activePage || page === '...' || Number(page) >
totalPage;
}
function isActive(page) {
return page === activePage;
}
收获:(通过今天的学习,学到了什么知识)
自定义指令HTML
<li class="pull-left paginationCenter">
每页显示
<input type="number" class="paginationGo text-center" ng-model="size" ng-change="changeSize()"/>
条
</li>
<li><a ng-disabled="isDisabled(1)" ng-click="goPage(1)">首页</a></li>
<li><a ng-if="isHavePrePage()" ng-click="goPage(activePage - 1)"> 上一页 </a></li>
<li ng-repeat="li in pageList track by $index" ng-class="{'active': isActive(li)}">
<a ng-disabled="isDisabled(li)" ng-click="goPage(li)"> {{li}} </a>
</li>
<li><a ng-if="isHaveNextPage()" ng-click="goPage(activePage + 1)"> 下一页 </a></li>
<li><a ng-disabled="isDisabled(totalPage)" ng-click="goPage(totalPage)">末页</a></li>
<li>
去第
<input type="number" class="paginationGo text-center" ng-model="jumpPage" ng-change="changeInput()"/>
页
<button class="pull-right btn btn-primary" style="border-radius:0" ng-click="goPage(jumpPage)">确定</button>
</li>
熟悉数组的方法改变它们的对象自身的值:
Array.prototype.copyWithin()
- 在数组内部,将一段元素序列拷贝到另一段元素序列上,覆盖原有的值。
Array.prototype.fill()
- 将数组中指定区间的所有元素的值,都替换成某个固定的值。
Array.prototype.pop()
- 删除数组的最后一个元素,并返回这个元素。
Array.prototype.push()
- 在数组的末尾增加一个或多个元素,并返回数组的新长度。
Array.prototype.reverse()
- 颠倒数组中元素的排列顺序,即原先的第一个变为最后一个,原先的最后一个变为第一个。
Array.prototype.shift()
- 删除数组的第一个元素,并返回这个元素。
Array.prototype.sort()
- 对数组元素进行排序,并返回当前数组。
Array.prototype.splice()
- 在任意的位置给数组添加或删除任意个元素。
Array.prototype.unshift()
- 在数组的开头增加一个或多个元素,并返回数组的新长度。
评论