Skipping some records from ng-repeat and showing dots - angularjs

Question

I developed pagination for list, and I stuck in one thing, I used ng-repeat for page counts, But when results are more say 1000, it is showing 1 2 3 4 till 100, it doesn't look good to display all page counts at once. So I Wanted to display page counts to 9,
i.e. if it is first page, page counts will look like
1 2 3 4 5 6 7 ... 100
If it is 50th page, the count list should display
1 ... 48 49 50 51 52 ... 100
If it is 100th page, the count list should display
1 ... 94 95 96 97 98 99 100
This will consume small space as well as it will look good.
Here is what I did till now.
For some other reason I can't use any other library only for pagination.
angular.module('myApp', [])
.controller("myController", function($scope) {
$scope.values = (function() {
var arr = [];
for (var a = 0; a < 1000; a++) {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
arr.push(text)
}
return arr;
})();
}).filter('range', function() {
return function(val, limit) {
var arr = [];
val = val / limit;
for (var i = 0; i < val; i++) {
arr.push(i);
}
return arr;
}
}).filter('slice', function() {
return function(arr, end, start) {
start = start || 0;
return (arr || []).slice(start, start + end);
};
});
li {
cursor: pointer;
}
li:hover {
background-color: #F00;
color: #FFF;
}
.pagination li {
display: inline-block;
}
.pagination li label span {
padding: 5px;
display: inline-block;
cursor: pointer;
}
.pagination li label input {
display: none;
}
.pagination li label input:checked+span {
background-color: #F0F;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div style="border:1px solid #F00">
<div ng-init="limit=10;start=0;">
<div style="border:1px solid #F00; display:inline-block;width:500px">
Pages:
<ul class="pagination">
<li ng-repeat="count in values.length|range:limit">
<label ng-click="$parent.start=count">
<input type="radio" name="pages" ng-checked="$index==0" />
<span>{{count+1}}</span>
</label>
</li>
</ul>
</div>
<div style="border:1px solid #F00; display:inline-block;">
Results Per page
<ul class="pagination">
<li ng-repeat="lim in [10,20,30,40]">
<label ng-click="$parent.limit=lim;$parent.start=0">
<input type="radio" name="records" ng-checked="$index==0" />
<span>{{lim}}</span>
</label>
</li>
</ul>
</div>
<ul>
<li ng-repeat="val in values|slice:limit:start*limit">{{$index+1}} {{ val}}</li>
</ul>
</div>
</div>
</div>

Answer 1

After some RnD with it and implementing some logic, I succeeded to do it. Here is the code.
angular.module('myApp', [])
.controller("myController", function($scope) {
$scope.values = (function() {
var arr = [];
for (var a = 0; a < 1000; a++) {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
arr.push({
val: text
})
}
return arr;
})();
}).filter('range', function() {
return function(val, limit, current) {
var arr = [];
val = val / limit;
if (current < 6) {
for (var i = 0; i < 8; i++)
arr.push(i);
arr.push("...");
arr.push(val - 1)
} else if (current > (val - 5)) {
arr.push(0)
arr.push("...");
for (var i = val - 7; i < val; i++)
arr.push(i);
} else {
arr.push(0);
arr.push("...")
arr.push(current - 3);
arr.push(current - 2);
arr.push(current - 1);
arr.push(current);
arr.push(current + 1);
arr.push("....")
arr.push(val - 1)
}
return arr;
}
}).filter('slice', function() {
return function(arr, end, start) {
start = start || 0;
return (arr || []).slice(start, start + end);
};
}).filter('isNum', function() {
return function(val) {
return !isNaN(val)
};
});
li {
cursor: pointer;
}
li:hover {
background-color: #F00;
color: #FFF;
}
.pagination li {
display: inline-block;
}
.pagination li label span {
padding: 5px;
display: inline-block;
cursor: pointer;
}
.pagination li label input {
display: none;
}
.pagination li label input:checked+span {
background-color: #F0F;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div style="border:1px solid #F00">
<div ng-init="limit=10;start=0;">
<div style="border:1px solid #F00; display:inline-block;width:500px">
Pages:
<ul class="pagination">
<li ng-repeat="count in values.length|range:limit:start+1">
<label>
<input ng-if="count|isNum" type="radio" name="pages" ng-checked="$index==0" />
<span ng-if="count|isNum" ng-click="$parent.$parent.start=count">{{count+1}}</span>
<span ng-if="!(count|isNum)">{{count}}</span>
</label>
</li>
</ul>
</div>
<div style="border:1px solid #F00; display:inline-block;">
Results Per page
<ul class="pagination">
<li ng-repeat="lim in [10,20,30,40]">
<label ng-click="$parent.limit=lim;$parent.start=0">
<input type="radio" name="records" ng-checked="$index==0" />
<span>{{lim}}</span>
</label>
</li>
</ul>
</div>
<ul>
<li ng-repeat="val in values|slice:limit:start*limit">{{$index+1}} {{ val.val}}</li>
</ul>
</div>
</div>
</div>

Answer 2

I have a fiddle that answers your question.
.filter('range', function () {
return function (val, limit, current) {
var arr = [];
var visibility = 3;
var threshold = 7;
var elemPerPage = 10;
val = val / limit;
if (current <= threshold - visibility) { // begining
for (var i = 0; i < threshold; i++) {
arr.push(i + 1);
}
arr.push("...");
arr.push(val);
} else if (current >= val - visibility) { // end
arr.push(1);
arr.push("...");
for (var i = val - threshold + 1; i <= val; i++) {
arr.push(i);
}
} else { // middle
arr.push(1);
arr.push("...");
for (var i = current - visibility + 1; i < current + visibility; i++) {
arr.push(i);
}
arr.push("..");
arr.push(val);
}
return arr;
}
})
I just improved the filter so that you have 3 types of return depending if your current page is close to the beginning, the end or if it is somewhere in the middle.
I added a variable for the current page but I guess you'll plug the rest and you'll resume your work.
Hope it helps!