I have a little problem with this app that i'm building to learn AngularJs.
It is a Football Stats app. I choose Home Team and Away team from 2 dropdown menus.
Then i have to do some math operations and show only the results.
This is my html code:
<div class='dropdown'>
<span>Seleziona Nazione: </span>
<select class='opzioni' ng-model="nazioniSelected">
<option ng-repeat="nazione in nazioni track by $index" value="{{nazione}}">{{nazione}}
</option>
</select>
</div>
<div class='dropdown2'>
<span>Seleziona Campionato: </span>
<select class='opzioni' ng-model="campionatoSelected">
<option ng-repeat="team in teams | filter: {Paese:nazioniSelected} track by $index" value="{{team.Campionato}}">{{team.Campionato}}
</option>
</select>
</div>
<div class='SquadraCasa'>
<span>Seleziona Squadra Casa: </span>
<select class='opzioni' ng-model="HomeTeamSelected" >
<option ng-repeat="team in teams | filter:
{Campionato:campionatoSelected, Paese:nazioniSelected} track by $index"
value='{{team.Nome}}'>
{{team.Nome}}
</option>
</select>
</div>
<div class='SquadraTrasferta'>
<span>Seleziona Squadra Trasferta: </span>
<select class='opzioni' ng-model="AwayTeamSelected">
<option ng-repeat="team in teams | filter:
{Campionato:campionatoSelected, Paese:nazioniSelected} track by $index"
value='{{team.Nome}}'>{{team.Nome}}
</option>
</select>
</div>
<div class='InfoCasa'>
<ul ng-repeat='team in teams | filter: {Nome: HomeTeamSelected} track by $index'>
<img ng-show='HomeTeamSelected' src="{{team.Stemma}} ">
<p class='nome' ng-show='HomeTeamSelected'> {{team.Nome}} </p>
</ul>
</div>
<div class='InfoTrasferta'>
<ul ng-repeat='team in teams | filter: {Nome: AwayTeamSelected} track by $index'>
<img ng-show='AwayTeamSelected' src="{{team.Stemma}} ">
<p class='nome2' ng-show='AwayTeamSelected'> {{team.Nome}} </p>
</ul>
</div>
<div class="Calcolo" ng-show='AwayTeamSelected'>
<p>
Doppia Chance {{doppia}}
</p><br><br>
<p>
1x2
</p><br><br>
<p>
Over 1,5
</p><br><br>
<p>
Over 2,5
</p>
<button class="calcola" ng-click='calcolarisultato(HomeTeamSelected,AwayTeamSelected)' > Calcola
</div>
My problem is: In this ng-click i want to pass not only the name, but all the team variable, because i need all the data about the teams that i selected.
For now my controller is like this and is not working:
FootballNumbers.controller('teamController', function($scope, $route, $routeParams, $http) {
$http.get('/api/teams').then(function(response) {
$scope.teams = response.data;
console.log(response.data);
});
var squadra = $scope.teams;
$scope.nazioni = ['Austria', 'Belgio', 'Bulgaria', 'Croazia', 'Danimarca', 'Finlandia',
'Francia', 'Germania', 'Grecia', 'Inghilterra', 'Italia', 'Norvegia', 'Olanda',
'Polonia', 'Portogallo', 'Rep. Ceca', 'Romania', 'Russia', 'Spagna', 'Turchia', 'Svezia',
'Svizzera', 'Ucraina'
];
$scope.calcolarisultato = function(squadra1, squadra2) {
for (i = 0; i < squadra.length; i++) {
for (j = 0; j < squadra.length; i++) {
if (squadra[i].Nome == squadra1) {
if (squadra[j].Nome == squadra2) {
var media1 = (squadra[i].Classifica + squadra[i].ClassificaCasa +
squadra[i].Forma) / 3;
var media2 = (squadra[j].Classifica + squadra[j].ClassificaTrasferta +
squadra[i].Forma) / 3;
if ((media1 + 3) <= media2) {
$scope.doppia = '1 X';
} else if ((media2 + 3) <= media1) {
$scope.doppia = 'X 2';
} else {
$scope.doppia = 'Niente';
}
}
}
}
}
}
});
It says to me that squadra is not defined.
This is my solution but, as i said, i would like to pass in the function all the HomeTeam and AwayTeam data, not only the name as i did in this code. Any help please?
The problem is because of async execution. The value of squadra is undefined outside the API call because of asynchronous execution.
FootballNumbers.controller('teamController', function($scope, $route, $routeParams, $http) {
$http.get('/api/teams').then(function(response) {
$scope.teams = response.data;
console.log(response.data);
var squadra = $scope.teams;
});
$scope.nazioni = ['Austria', 'Belgio', 'Bulgaria', 'Croazia', 'Danimarca', 'Finlandia',
'Francia', 'Germania', 'Grecia', 'Inghilterra', 'Italia', 'Norvegia', 'Olanda',
'Polonia', 'Portogallo', 'Rep. Ceca', 'Romania', 'Russia', 'Spagna', 'Turchia', 'Svezia',
'Svizzera', 'Ucraina'
];
$scope.calcolarisultato = function(squadra1, squadra2) {
for (i = 0; i < squadra.length; i++) {
for (j = 0; j < squadra.length; i++) {
if (squadra[i].Nome == squadra1) {
if (squadra[j].Nome == squadra2) {
var media1 = (squadra[i].Classifica + squadra[i].ClassificaCasa +
squadra[i].Forma) / 3;
var media2 = (squadra[j].Classifica + squadra[j].ClassificaTrasferta +
squadra[i].Forma) / 3;
if ((media1 + 3) <= media2) {
$scope.doppia = '1 X';
} else if ((media2 + 3) <= media1) {
$scope.doppia = 'X 2';
} else {
$scope.doppia = 'Niente';
}
}
}
}
}
}
});
You init the teams with an async function but you init the squadra variable before to get these values. Instead of using the squadra value inside your controller, simply use the $scope.teams and remove this line:
var squadra = $scope.teams;
Then wherever in your controller you use squadra, change it with $scope.teams
Also think to define the constants as separated AngularJS constants instead of listing them in the controller, and then in the controller inject that constant. This keeps the code cleaner and more reusable.
Related
I am trying to toggle the button on and off in a ng-repeat, view on map works, but when it changes to remove marker, it pass me an error 'ReferenceError: passedIndex is not defined' in console log. Any way to fix that?
HTML:
<li class="displaySubCategory" ng-repeat="communityTheme in community | startFrom:currentPage*pageSize | limitTo:pageSize">
<div class="categoryImg">
<img src="img/csvIcon.png" />
<img src="img/shpIcon.png" />
</div>
<div class="categoryDesc">
<p>{{communityTheme.THEMENAME}}</p>
View on Map
Remove Marker
</div>
</li>
JS:
$scope.getMapData = function (msg, passedIndex) {
map.addLayer(cities);
$scope.Lng.length = 0;
$scope.Lat.length = 0;
$scope.dataLatLng.length = 0;
queryNameUrl = 'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=' + msg +
'&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTQwOTI5OTE2LCJleHAiOjE1NDEzNjE5MTYsIm5iZiI6MTU0MDkyOTkxNiwianRpIjoiYjVkNmZkNGJhOWJiNGJiM2FkNWQzN2ZhNTAzMGIxYWEifQ.YQdfV43wrg8dX-He7-mwIL2Qhjsexq0tgNu5RotAdu4';
$http.get(queryNameUrl).then(function(response) {
$scope.apiResult = response.data.SrchResults;
$scope.apiResult.splice(0,1);
console.log($scope.apiResult)
for (var i= 0; i < $scope.apiResult.length; i++) {
if ($scope.apiResult[i].Type == "Point"){
$scope.apiResult[i].visibility = true;
console.log($scope.apiResult)
$scope.dataLatLng.push($scope.apiResult[i].LatLng)
$scope.Lat.push($scope.dataLatLng[i].split(',')[0]);
$scope.Lng.push($scope.dataLatLng[i].split(',')[1]);
L.marker([$scope.Lat[i], $scope.Lng[i]], {icon: greenIcon}).bindPopup($scope.apiResult[i].DESCRIPTION).addTo(cities);
}
// else if ($scope.apiResult[i].Type == "Polygon"){
// $scope.PolyLine.push($scope.apiResult[i].LatLng)
// console.log($scope.PolyLine)
// // for (var i = 0; i < $scope.PolyLine.length; i++) {
// // $scope.polyLineCord.push($scope.PolyLine[i])
// // // console.log($scope.polyLineCord)
// // }
// }
}
})
if($scope.community[passedIndex].visibility)
{
$scope.community[passedIndex].visibility = false;
}
else{
$scope.community[passedIndex].visibility = true;
}
}
Remove Marker:
$scope.removeMarker = function ($index) {
if($scope.community[passedIndex].visibility)
{
$scope.community[passedIndex].visibility =false;
cities.clearLayers();
}
else {
$scope.community[passedIndex].visibility = true;
}
}
Thanks for the help in advance !
You need to use track by $index
<li class="displaySubCategory" ng-repeat="communityTheme in community | startFrom:currentPage*pageSize | limitTo:pageSize track by $index">
and it should be passedIndex instead of $index in your removeMarker function
$scope.removeMarker = function (passedIndex) {
I'm trying to set a value into the variable "counter" based on the option selected but it's not working, see my code below:
HTML
<select [(ngModel)]="data[0].dimension" class="form-control">
<option *ngFor="let data of dataopt" [value]="data.dimension">{{ data.dimension }}</option>
</select>
TS
data = [{
dimension: ''
}]
dataopt = [{dimension:'abc1'},
{dimension:'abc2'},
{dimension:'abc3'},
{dimension:'abc4'}]
constructor(public graphicService: GraphicService) {
this.graphicService.getDatas().subscribe(datas => {
this.datas = datas;
if (this.data[0].dimension == "abc1")
{
this.counter = 0;
}
else if(this.data[0].dimension == 'abc2'){
this.counter = 2;
}
else{
this.counter = 3;
}
}}
And then I have a dynamic code based on the counter:
this.somedata[this.counter]
It's not working as expected
if you have correctly imported FormsModule in your component then change your html and ts file like below
HTML
<select [(ngModel)]="dimensions" class="form-control" name="dimension">
<option *ngFor="let data of dataopt" [value]="data.dimension">{{ data.dimension }}</option>
</select>
no need to declare data as it is a local variable only.
TS
public dimensions: any;
dataopt = [{dimension:'abc1'},
{dimension:'abc2'},
{dimension:'abc3'},
{dimension:'abc4'}]
constructor(public graphicService: GraphicService) {
this.graphicService.getDatas().subscribe(datas => {
this.datas = datas;
if (this.dimensions == "abc1")
{
this.counter = 0;
}
else if(this.dimensions == 'abc2'){
this.counter = 2;
}
else{
this.counter = 3;
}
}}
I have many list of radio button in a ng-repeat.
I've succeded for get the selected item.
Now I try to set the default value of the radio.
Can some one help me please. Here my code for the button.
Thank's
VariableRadioArr2 = [{"id":"21","libelle":"P15m","type":"radio","valeur_1":"Oui","valeur_2":"Non","valeur_3":"","valeur_4":"","valeur_5":"","valeur_6":"","valeur_7":"","valeur_8":"","valeur_9":"","valeur_10":""},{"id":"25","libelle":"Surface (m²)","type":"input","valeur_1":"","valeur_2":"","valeur_3":"","valeur_4":"","valeur_5":"","valeur_6":"","valeur_7":"","valeur_8":"","valeur_9":"","valeur_10":""},{"id":"36","libelle":"p16","type":"radio","valeur_1":"Oui","valeur_2":"Non","valeur_3":"","valeur_4":"","valeur_5":"","valeur_6":"","valeur_7":"","valeur_8":"","valeur_9":"","valeur_10":""}]
$scope.itemGroups = VariableRadioArr2;
console.log(VariableRadioArr2);
//$scope.selected = 1;
$scope.VariableRadioToggle2 = true;
$scope.clickedVariableRadio2 = function(test)
{
$scope.clickedVariableRadio2_select = JSON.parse(JSON.stringify($scope.itemGroups));
}
if(VariableRadioArr2.length == 0)
{
$scope.clickedVariableRadio2_select = [];
$scope.VariableRadioToggle2 = false;
}
<ion-list id="page-list7" ng-show="VariableRadioToggle2">
<div ng-repeat="itemGrp in itemGroups">
<ion-item class="item-divider" id="page-list-item-divider32">{{itemGrp.name}}</ion-item>
<ion-toggle name="{{itemGrp.name}}" ng-click="clickedVariableRadio2(portion.selected)" ng-repeat="(key,portion) in itemGrp.Portions" ng-model="itemGrp.selected_item" ng-true-value="'{{key}}'" ng-false-value="">{{portion.name}}</ion-toggle>
</div>
</ion-list>
Here I'm doing a loop from 1-10 to copy the values into a new object and delete the old ones.
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
var Variable = [{"id":"21","libelle":"P15m","type":"radio","valeur_1":"Oui","valeur_2":"Non","valeur_3":"","valeur_4":"","valeur_5":"","valeur_6":"","valeur_7":"","valeur_8":"","valeur_9":"","valeur_10":""},{"id":"25","libelle":"Surface (m²)","type":"input","valeur_1":"","valeur_2":"","valeur_3":"","valeur_4":"","valeur_5":"","valeur_6":"","valeur_7":"","valeur_8":"","valeur_9":"","valeur_10":""},{"id":"36","libelle":"p16","type":"radio","valeur_1":"Oui","valeur_2":"Non","valeur_3":"","valeur_4":"","valeur_5":"","valeur_6":"","valeur_7":"","valeur_8":"","valeur_9":"","valeur_10":""}];
// Create sub object for all values
// and delete the old values
for (i = 0; i < Variable.length; i++) {
Variable[i].values = {};
Variable[i].selected = '';
for (v = 1; v < 11; v++) {
if(Variable[i]['valeur_'+v] != undefined){
Variable[i].values['valeur_'+v] = Variable[i]['valeur_'+v];
delete Variable[i]['valeur_'+v];
}
}
}
$scope.itemGroups = Variable;
// Set defaults
// By index
$scope.itemGroups[1].selected = 'valeur_4';
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="itemGrp in itemGroups">
<div>{{itemGrp.libelle}}</div>
<label ng-repeat="(key, value) in itemGrp.values">
<input type="radio" name="{{itemGrp.id}}" ng-model="itemGrp.selected" ng-value="key">{{value}}
</label>
</div>
</div>
I can not understand. How to make a correct search when pagination?
English for bad writing.
I did so:
var app = angular.module('appTelDirectory', []);
app.controller('directoryList', function($scope) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.users = [{}]
$scope.numberOfPages = function() {
return Math.ceil($scope.users.length / $scope.pageSize);
}
for (var i = 0; i < 45; i++) {
$scope.users.push({
'name': 'user' + i
});
}
});
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="appTelDirectory" ng-controller="directoryList">
<input placeholder="Поиск..." ng-model="searchAll" class="form-control">
<ul>
<li ng-repeat="item in users | filter:searchAll | startFrom:currentPage*pageSize | limitTo:pageSize">{{item.name}}</li>
</ul>
<table>
<tr ng-repeat="item in users | startFrom:currentPage*pageSize | limitTo:pageSize">
</table>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= users.length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
</button>
</div>
How do I change the number of items, depending on the user list. NumberOfPages unchanged...
You can use a separate list for it like this. Basically, I'm using another list filteredUsers. Now instead of using filter in the view i.e. filter:searchAll, I'm doing the same thing using the underlying $filter service in the $watch which will be invoked as I type in the field.
Now, we always have the filtered users in the filteredUsers scope variable so your further calculation now can be based on the $scope.filteredUsers not on $scope.users.
var app = angular.module('appTelDirectory', []);
app.controller('directoryList', function($scope, $filter) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.users = [{}];
// Using a separate list of filtered users
$scope.filteredUsers = [{}];
$scope.numberOfPages = function() {
return Math.ceil($scope.filteredUsers.length / $scope.pageSize);
}
for (var i = 0; i < 45; i++) {
$scope.users.push({
'name': 'user' + i
});
}
$scope.filteredUsers = angular.copy($scope.users);
$scope.$watch('searchAll', function(newValue) {
// Manually filtering here instead doing in the view
$scope.filteredUsers = $filter('filter')($scope.users, {$: newValue});
});
});
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="appTelDirectory" ng-controller="directoryList">
<input placeholder="Поиск..." ng-model="searchAll" class="form-control">
<ul>
<li ng-repeat="item in filteredUsers | startFrom:currentPage*pageSize | limitTo:pageSize">{{item.name}}</li>
</ul>
<table>
<tr ng-repeat="item in users | startFrom:currentPage*pageSize | limitTo:pageSize">
</table>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= filteredUsers.length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
</button>
</div>
I'm writing a paginated table with a page selector at the bottom that displays the different page numbers
I'm using knockout. The numbers are coming from a ko.computed array (self.pages) that calculates how many pages there are based on the number of results / results per page. The problem I'm running into is if the data array is very long and the results per page is set somewhat low, I get something like this:
What I want to do is limit the number of menu items to three, so if page #4 is selected, only items 3,4,5 are visible. Currently I'm implementing a second ko.computed that first retrieves the value of self.pages, then gets the value of the current page number (self.pageNumber), and slices the array so that only 3 items are returned:
self.availablePages = ko.computed(function() {
var pages = self.pages();
var current = self.pageNumber();
if (current === 0) {
return pages.slice(current, current + 3);
} else {
return pages.slice(current - 1, current + 2);
}
});
Now all of this seems to be working fine but there's one bug I have not been able to stamp out. Using the knockout css data-bind, I'm telling it to assign a class of 'selected' to whichever element holds the same value as self.pageNumber (see code below).
If the element selected does not require self.availablePages to change (i.e. selecting 2 when 1 was the previous selection), there are no problems; 2 becomes selected and 1 becomes un-selected.
However, if the selection does require self.availablePages to change (i.e. 1,2,3 visible, selecting 3 will change visible to 2,3,4), the correct numbers display, but instead of 3 being selected, 4 is selected. I'm assuming this is because the index of the array that 3 used to be located at (last) is now being occupied by 4.
Here's the menu:
<ul data-bind="foreach: availablePages">
<li data-bind="if: $index() < 1">
<a data-bind="click: $parent.toFirstPage">First</a>
</li>
<li>
<a data-bind="text: displayValue, click: $parent.goToPage(iterator), css: { selected: $parent.pageNumber() === iterator }"></a>
</li>
<li data-bind="if: $parent.isLastIteration($index)">
<a data-bind="click: $parent.toLastPage">Last</a>
</li>
</ul>
The array being iterated over was originally just an array of numbers, but in trying to fix this bug I changed it to be an array of the following object:
available.MenuModel = function(iterator) {
var self = this;
self.displayValue = iterator + 1;
self.iterator = iterator;
self.isSelected = ko.observable(false);
}
One thing I tried doing was adding the self.isSelected observable to all items in the menu, and then when self.availablePages gets re-computed, the function checks what the pageNumber is and then finds which item in the array matches that and sets self.isSelected(true), and then tried keying the css binding to that.
Unfortunately this did not work; it still has the exact same bug. I've been debugging the script like crazy and there doesn't seem to be an issue; everything seems to know that 3 should be selected, but what's actually selected is 4.
I'm guessing that the knockout bindings aren't smart enough to keep up with this. Is there something I can do or some pattern that would help knockout keep track of which element should be selected? I even tried taking knockout out of it completely, and had a function in the script manually remove/add the 'selected' class whenever self.pageNumber was changed and/or whenever self.availablePages changed but I still got the same issue, so maybe this isn't a knockout issue but something with javascript.
I've tried everything else I can think of; subscribing to various observables, promises, but like I said everything already knows what should be selected so additional checks and callbacks aren't altering anything nor eliminating the bug.
I'm hoping someone will either know the cause/solution of the bug or a smarter way to accomplish the task. This is the self.pages that self.availablePages keys off of, in case that's helpful:
self.pages = ko.computed(function() {
var start = self.totalPages();
var pages = [];
for (var i = 0; i < start + 1; ++i)
pages.push(new available.MenuModel(i));
return pages;
});
This is the entire javascript model (using requireJs):
define(['underscore', 'knockout'], function(_, ko) {
var available = available || {};
available.DynamicResponsiveModel = function(isDataObservable, isPaginated) {
var self = this;
self.workingArray = ko.observableArray([]);
self.backgroundArray = ko.observableArray([]);
self.pageNumber = ko.observable(0);
self.count = function () {
return 15;
}
self.resultsPerPage = ko.observable(self.count());
self.selectResultsPerPage = [25, 50, 100, 200, 500];
self.resultsPerPageOptions = ko.computed(function () {
return self.selectResultsPerPage;
});
self.activeSortFunction = isDataObservable ? available.sortAlphaNumericObservable : available.sortAlphaNumeric;
self.resetPageNumber = function() {
self.pageNumber(0);
}
self.initialize = function(data) {
var sortedList = data.sort(function(obj1, obj2) {
return obj2.NumberOfServices - obj1.NumberOfServices;
});
self.workingArray(sortedList);
self.backgroundArray(sortedList);
self.pageNumber(0);
}
self.intializeWithoutSort = function(data) {
self.workingArray(data);
self.backgroundArray(data);
self.pageNumber(0);
}
self.totalPages = ko.computed(function() {
var num = Math.floor(self.workingArray().length / self.resultsPerPage());
num += self.workingArray().length % self.resultsPerPage() > 0 ? 1 : 0;
return num - 1;
});
self.paginated = ko.computed(function () {
if (isPaginated) {
var first = self.pageNumber() * self.resultsPerPage();
return self.workingArray.slice(first, first + self.resultsPerPage());
} else {
return self.workingArray();
}
});
self.pages = ko.computed(function() {
var start = self.totalPages();
var pages = [];
for (var i = 0; i < start + 1; ++i)
pages.push(new available.MenuModel(i));
return pages;
});
self.availablePages = ko.computed(function() {
var pages = self.pages();
var current = self.pageNumber();
if (current === 0) {
return pages.slice(current, current + 3);
} else {
return pages.slice(current - 1, current + 2);
}
});
self.pageNumDisplay = ko.computed(function() {
return self.pageNumber() + 1;
});
self.hasPrevious = ko.computed(function() {
return self.pageNumber() !== 0;
});
self.hasNext = ko.computed(function() {
return self.pageNumber() !== self.totalPages();
});
self.next = function() {
if (self.pageNumber() < self.totalPages()) {
self.pageNumber(self.pageNumber() + 1);
}
}
self.previous = function() {
if (self.pageNumber() != 0) {
self.pageNumber(self.pageNumber() - 1);
}
}
self.toFirstPage = function() {
self.pageNumber(0);
}
self.toLastPage = function() {
self.pageNumber(self.totalPages());
}
self.setPage = function(data) {
return new Promise(function(resolve, reject) {
self.pageNumber(data);
});
}
self.goToPage = function(data) {
self.pageNumber(data);
}
self.isLastIteration = function (index) {
var currentIndex = index();
var count = self.pages().length;
return currentIndex === count - 1;
}
self.resultsPerPage.subscribe(function() {
self.pageNumber(0);
});
self.filterResults = function (filterFunction) {
self.resetPageNumber();
self.workingArray(filterFunction(self.backgroundArray()));
}
self.resetDisplayData = function() {
self.workingArray(self.backgroundArray());
}
self.updateVisibleResults = function(data) {
self.workingArray(data);
}
}
available.sortAlphaNumericObservable = function () {
//...
}
available.sortAlphaNumeric = function () {
//...
}
return available;
});
Here's the entire table:
<div data-bind="visible: showListOfEquipment, with: availableEquipmentModel">
<section class="panel panel-default table-dynamic">
<table class="primary-table table-bordered">
<thead>
<tr>
<th>
<div class="th">
Part Number
<span class="fa fa-angle-up" data-bind="click: function () { sortByFirstColumn(false); }"></span>
<span class="fa fa-angle-down" data-bind="click: function () { sortByFirstColumn(true); }"></span>
</div>
</th>
<th>
<div class="th">
Serial Number
<span class="fa fa-angle-up" data-bind="click: function () { sortBySecondColumn(false); }"></span>
<span class="fa fa-angle-down" data-bind="click: function () { sortBySecondColumn(true); }"></span>
</div>
</th>
<th>
<div class="th">
Type
<span class="fa fa-angle-up" data-bind="click: function () { sortByThirdColumn(false); }"></span>
<span class="fa fa-angle-down" data-bind="click: function () { sortByThirdColumn(true); }"></span>
</div>
</th>
<th>
<div class="th">
Equipment Group
<span class="fa fa-angle-up" data-bind="click: function () { sortByFourthColumn(false); }"></span>
<span class="fa fa-angle-down" data-bind="click: function () { sortByFourthColumn(true); }"></span>
</div>
</th>
<th>
<div class="th">
Operational
<span class="fa fa-angle-up" data-bind="click: function () { sortByFifthColumn(false); }"></span>
<span class="fa fa-angle-down" data-bind="click: function () { sortByFifthColumn(true); }"></span>
</div>
</th>
<th>
<div class="th">
Valid
<span class="fa fa-angle-up" data-bind="click: function () { sortBySixthColumn(false); }"></span>
<span class="fa fa-angle-down" data-bind="click: function () { sortBySixthColumn(true); }"></span>
</div>
</th>
</tr>
</thead>
<tbody data-bind="foreach: paginated">
<tr>
<td data-bind="text: $data.PartNumber"></td>
<td><a target="_blank" data-bind="text: $data.SerialNumber, click: function () { $root.setSerialNumberAndFindEquipment(SerialNumber) }" style="color:royalblue"></a></td>
<td data-bind="text: $data.Type"></td>
<td data-bind="text: $data.EquipmentGroup"></td>
<td>
<span data-bind="css: $root.operationalCss($data), text: $root.getOpStatus($data)"></span>
</td>
<td data-bind="text: $data.Validity"></td>
</tr>
</tbody>
</table>
<footer class="table-footer">
<div class="row">
<div class="col-md-6 page-num-info">
<span>Show <select style="min-width: 40px; max-width: 50px;" data-bind="options: selectResultsPerPage, value: resultsPerPage"></select> entries per page</span>
</div>
<div class="col-md-6 text-right pagination-container">
<ul class="pagination-sm pagination" data-bind="foreach: pages">
<li data-bind="if: $index() < 1"><a data-bind="click: $parent.toFirstPage">First</a> </li>
<li class="paginationLi"><a data-bind="text: displayValue, click: $parent.goToPage(iterator), css: { selected: isSelected }"></a></li>
<li data-bind="if: $parent.isLastIteration($index)"> <a data-bind="click: $parent.toLastPage">Last</a> </li>
</ul>
</div>
</div>
</footer>
</section>
I went ahead and built a paginator. Instead of using an array as you did, I used just the number of available pages, pageCount.
Probably the only thing worth looking into in more detail is the calculation which pages are to be displayed:
this.visiblePages = ko.computed(function() {
var previousHalf = Math.floor( (this.visiblePageCount() - 1) / 2 ),
nextHalf = Math.ceil( (this.visiblePageCount() - 1) / 2 ),
visiblePages = [],
firstPage,
lastPage;
// too close to the beginning
if ( this.currentPage() - previousHalf < 1 ) {
firstPage = 1;
lastPage = this.visiblePageCount();
if ( lastPage > this.pageCount() ) {
lastPage = this.pageCount();
}
// too close to the end
} else if ( this.currentPage() + nextHalf > this.pageCount() ) {
lastPage = this.pageCount();
firstPage = this.pageCount() - this.visiblePageCount() + 1;
if (firstPage < 1) {
firstPage = 1;
}
// just right
} else {
firstPage = this.currentPage() - previousHalf;
lastPage = this.currentPage() + nextHalf;
}
for (var i = firstPage; i <= lastPage; i++) {
visiblePages.push(i);
}
return visiblePages;
}, this);
Let's go through this piece by piece. We want our current page to be in the middle of all displayed pagination buttons, with some to its left and some to its right. But how many?
If we use an odd number such as three, that's simple: the number minus 1 (the selected one) divided by two. (3 - 1) / 2 = 1, or one to each side.
With an even number of pagination buttons to display, that doesn't work, so we calculate each side individually and round one result up and one result down:
var previousHalf = Math.floor( (this.visiblePageCount() - 1) / 2 ),
nextHalf = Math.ceil( (this.visiblePageCount() - 1) / 2 ),
There are three possible results:
our selection fits
we're too close to the beginning
we're too close to the end
If we're too close to the beginning:
if ( this.currentPage() - previousHalf < 1 ) {
firstPage = 1;
lastPage = this.visiblePageCount();
if ( lastPage > this.pageCount() ) {
lastPage = this.pageCount();
}
}
we start with 1 and try to display pages 1 up to visiblePageCount. If that doesn't work either, because we don't have enough pages, we simply display all we have.
If we're too close to the end:
} else if ( this.currentPage() + nextHalf > this.pageCount() ) {
lastPage = this.pageCount();
firstPage = this.pageCount() - this.visiblePageCount() + 1;
if (firstPage < 1) {
firstPage = 1;
}
}
we end with the last page and try to display as many as we need to the left. If that doesn't work, because we don't have enough pages, we simply display all we have.
Here's the full example:
var ViewModel;
ViewModel = function ViewModel() {
var that = this;
this.pageCount = ko.observable(20);
this.currentPage = ko.observable(1);
this.visiblePageCount = ko.observable(3);
this.gotoPage = function gotoPage(page) {
that.currentPage(page);
};
this.visiblePages = ko.computed(function() {
var previousHalf = Math.floor( (this.visiblePageCount() - 1) / 2 ),
nextHalf = Math.ceil( (this.visiblePageCount() - 1) / 2 ),
visiblePages = [],
firstPage,
lastPage;
if ( this.currentPage() - previousHalf < 1 ) {
firstPage = 1;
lastPage = this.visiblePageCount();
if ( lastPage > this.pageCount() ) {
lastPage = this.pageCount();
}
} else if ( this.currentPage() + nextHalf > this.pageCount() ) {
lastPage = this.pageCount();
firstPage = this.pageCount() - this.visiblePageCount() + 1;
if (firstPage < 1) {
firstPage = 1;
}
} else {
firstPage = this.currentPage() - previousHalf;
lastPage = this.currentPage() + nextHalf;
}
for (var i = firstPage; i <= lastPage; i++) {
visiblePages.push(i);
}
return visiblePages;
}, this);
};
ko.applyBindings( new ViewModel() );
ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
button {
margin-right: 0.5rem;
padding: 0.5rem;
background-color: lightgrey;
border: none;
}
button.selected {
background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul>
<li><button data-bind="click: gotoPage.bind($data, 1)">First</button></li>
<!-- ko foreach: visiblePages -->
<li>
<button data-bind="text: $data,
click: $parent.gotoPage,
css: { selected: $parent.currentPage() === $data }"></button>
</li>
<!-- /ko -->
<li><button data-bind="click: gotoPage.bind($data, pageCount())">Last</button></li>
</ul>