Try catch doesn't work on my code, I'm using a library to create pagination called "pagination.js", and when my server doesn't return any item, the library return an error:
Uncaught Error: Pagination: dataSource.items is undefined.
I want to give a message on the screen when there's no item on database
try {
$('#url-list').pagination({
dataSource: 'get_data.php?action=all-urls',
locator: 'items',
totalNumberLocator: function(response) {
return response.totalRows;
},
pageSize: 10,
className: 'paginationjs-theme-blue paginationjs-big',
afterPreviousOnClick: function() {
window.location = "dashboard.php#urls";
},
afterPageOnClick: function() {
window.location = "dashboard.php#urls";
},
afterNextOnClick: function() {
window.location = "dashboard.php#urls";
},
callback: function(data) {
var paginationWrapper = $('#url-list');
var dataContainer = $('.url-list-wrapper', paginationWrapper);
var html = '<ul class="p-0">';
$.each(data, function(index, items) {
html += '<div class="url-wrapper p-4 mb-4"><div class="is-flex is-justify-content-space-between"><p class="url-wrapper-limit is-size-5">' + items.long_url + '</p><p class="ml-3 is-size-5">' + items.date + '</p></div><hr class="url-wrapper-divider"><div class="is-flex is-justify-content-space-between mb-4">dcsr.link/' + items.url_id + '<div class="is-flex is-align-items-center"><span class="tag is-primary mr-1 has-text-weight-bold is-size-6">' + items.clicks + '</span><p class="is-size-5">Clicks</p></div></div><div class="url-wrapper-footer is-flex is-justify-content-space-between"><div><button class="button is-primary mr-1"><i class="fa-solid fa-copy"></i></button><button class="button is-primary mr-1"><i class="fa-solid fa-pen-to-square"></i></button><button class="button is-primary mr-1"><i class="fa-solid fa-qrcode"></i></button><button class="button is-danger mr-1"><i class="fa-solid fa-trash"></i></button></div><div><button class="button is-primary"><i class="fa-solid fa-chart-line mr-2"></i><p>Stats</p></button></div></div></div>';
});
html += '</ul>';
dataContainer.html(html);
}
});
} catch (error) {
alert('Server didn'
t
return any item!')
}
Instead of try/catch check data.length with if/else condition.
Some thing like this inside callback function.
callback: function(data) {
if (data.length > 0) {
var paginationWrapper = $('#url-list');
var dataContainer = $('.url-list-wrapper', paginationWrapper);
var html = '<ul class="p-0">';
$.each(data, function(index, items) {
html += '<div class="url-wrapper p-4 mb-4"><div class="is-flex is-justify-content-space-between"><p class="url-wrapper-limit is-size-5">' + items.long_url + '</p><p class="ml-3 is-size-5">' + items.date + '</p></div><hr class="url-wrapper-divider"><div class="is-flex is-justify-content-space-between mb-4">dcsr.link/' + items.url_id + '<div class="is-flex is-align-items-center"><span class="tag is-primary mr-1 has-text-weight-bold is-size-6">' + items.clicks + '</span><p class="is-size-5">Clicks</p></div></div><div class="url-wrapper-footer is-flex is-justify-content-space-between"><div><button class="button is-primary mr-1"><i class="fa-solid fa-copy"></i></button><button class="button is-primary mr-1"><i class="fa-solid fa-pen-to-square"></i></button><button class="button is-primary mr-1"><i class="fa-solid fa-qrcode"></i></button><button class="button is-danger mr-1"><i class="fa-solid fa-trash"></i></button></div><div><button class="button is-primary"><i class="fa-solid fa-chart-line mr-2"></i><p>Stats</p></button></div></div></div>';
});
html += '</ul>';
dataContainer.html(html);
} else {
alert('Server didn\'t return any item!')
}
}
Related
I am trying to pass multiple parameters in a 'onclick' but it is not working and JS gave me headaches.
When clicking the 'div' and going to agregarADetalleMenu gives me this error:
SyntaxError: missing ) after argument list
function LlenarTableMenu(data) {
$('#cards-productos').empty();
$.each(data, function(i, val) {
var block2 = '<div class="col-4 col-md-6" onclick="agregarADetalleMenu(' + val.id + ', ' + val.name + ', ' + val.price + ')">' +
'<figure class="card card-product"> ' +
'<div class="img-wrap">' +
' <img src="' + val.imagen + '">' +
#* '<center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>' + *# '</div>' +
'<figcaption class="info-wrap">' +
'' + val.name + '' +
'<div class="action-wrap"> ' +
'<div class="price-wrap h5">' +
#* '<span class="price-new">' + val.price.toFixed(2) + '</span>' + *# '<span style="display: none;" class="catid">' + val.id + '</span>' +
'</div>' +
'</div>' +
'</figcaption> ' +
'</figure> ' +
'</div>';
$("#cards-productos").append(block2);
});
}
Do you mean this?
Note I wrapped the function values in quotes - you nested your quotes
function LlenarTableMenu(data) {
$('#cards-productos').html(
data.map(val => `<div class="col-4 col-md-6" onclick="agregarADetalleMenu('${val.id}','${val.name}',${val.price})">
<figure class="card card-product">
<div class="img-wrap">
<img src="${val.imagen}">
<center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>
</div>
<figcaption class="info-wrap">
${val.name}
<div class="action-wrap">
<div class="price-wrap h5">
<span class="price-new">${val.price.toFixed(2)}</span>
<span style="display: none;" class="catid">${val.id}</span>
</div>
</div>
</figcaption>
</figure>
</div>`).join("")
);
}
This is better
function LlenarTableMenu(data) {
$('#cards-productos').html(
data.map(val => `<div class="agregar col-4 col-md-6" data-id="${val.id}" data-name="${val.name}" data-price="${val.price}">
<figure class="card card-product">
<div class="img-wrap">
<img src="${val.imagen}">
<center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>
</div>
<figcaption class="info-wrap">
${val.name}
<div class="action-wrap">
<div class="price-wrap h5">
<span class="price-new">${val.price.toFixed(2)}</span>
<span style="display: none;" class="catid">${val.id}</span>
</div>
</div>
</figcaption>
</figure>
</div>`).join("")
);
}
and then have
$('#cards-productos').on("click",".agregar",function() {
agregarADetalleMenu(this.dataset.id,this.dataset.val,this.dataset.price)
})
You're missing quotes around the values being passed in to the function. Because you already used single and double quotes in your string, you can use escaped single (or double) quotes as follows:
onclick="agregarADetalleMenu(\'' + val.id + '\', \'' + val.name + '\', \'' + val.price + '\')"
I am writing an app with Ionic and Firebase and my users have the choice to add something to their "Favorites".
Now, I found a way to have the user clicking the button and changing the text once clicked and saving the data in the database, but if the user moves to another page and come back, the button comes back to "Add to favorites".
How to display the text on the button regarding what the user did with it before ?
The DOM :
<div class="list card" id="topLetters-card21" ng-repeat="letter in letters">
<ion-item class="item-avatar item-icon-right" id="userId{{$index}}" alt="{{letter.uid}}" ui-sref="menu.user">
<img src="{{letter.userpic}}" alt="">
<h2>{{letter.username}} </h2>
<p>{{letter.location}}</p>
<i class="icon ion-android-arrow-dropright"></i>
</ion-item>
<h2 style="color:#000000;" class="padding-left" id="letterId{{$index}}" alt="{{letter.letter}}">{{letter.title}}</h2>
<div style="{{letter.font}}background: url(img/{{letter.background}}.jpg) no-repeat center;background-size:cover;">
<h5 style="{{letter.font}}text-align:right;"id="topLetters-heading15" style="color:#000000;" class="padding">{{letter.date}}</h5>
<h5 style="{{letter.font}}"id="topLetters-heading4" style="color:#000000;" class="padding">{{letter.opening}} {{letter.to}}, </h5>
<div id="topLetters-markdown3" style="text-align:justify;" class="show-list-numbers-and-dots padding">
<p style="color:#000000;">{{letter.message}}</p>
</div>
<h5 style="{{letter.font}}"id="topLetters-heading5" style="color:#000000;text-align:right;" class="padding">{{letter.conclusion}}, {{letter.username}}.</h5>
</div>
<button id="addletter{{$index}}" ng-click="addToFavorites($index)" class="button button-dark button-small button-block icon ion-ios-heart-outline" alt={{letter.letter}}> Add to Favorites</button>
<ion-item class="item-icon-left item-icon-right" id="topLetters-list-item29">
<i class="icon ion-ios-heart-outline"></i>{{letter.likes}}
<i class="icon ion-ios-flag"></i>
</ion-item>
<div class="spacer" style="width: 300px; height: 29px;"></div>
</div>
The Controller :
var ref = firebase.database().ref('/letters');
//retrieve the items in the cart of the user
ref.orderByChild("likes").on("value", function(snapshot1) {
$timeout(function(){
$scope.letters = snapshot1.val();
})
})
$scope.addToFavorites = function(ind){
var letterId = document.getElementById('letterId'+ind).getAttribute('alt');
var userId2 = document.getElementById('userId'+ind).getAttribute('alt');
var userId = firebase.auth().currentUser.uid;
//Add the letterUid and ID to our favorites to retrieve it later
//Add our uid to the letter to count the number of Favorites
if(document.getElementById('addletter'+ind).textContent == " Add to Favorites"){
$timeout(function(){
firebase.database().ref('accounts/' + userId + '/favorites/' + letterId).update({
letterId: letterId,
userId: userId2,
});
firebase.database().ref('letters/' + letterId + '/favorites/' + userId).update({
userId: userId,
});
document.getElementById('addletter'+ind).textContent = " Remove from Favorites";
})
} else if (document.getElementById('addletter'+ind).textContent == " Remove from Favorites")
$timeout(function(){
document.getElementById('addletter'+ind).textContent = " Add to Favorites";
firebase.database().ref('/accounts/' + userId + "/favorites/" + letterId).remove();
firebase.database().ref('/letters/' + letterId + "/favorites/" + userId).remove();
})
}
I believe you should do something like this:
JS
$scope.accountsFavorites = [];
$scope.lettersFavorites = [];
$scope.getFavorites = function(){
$scope.accountsFavorites = firebase.database().ref('/accounts/' + userId + "/favorites/")
$scope.lettersFavorites = firebase.database().ref('/letters/' + letterId + "/favorites/")
$scope.syncFavorites();
}
$scope.syncFavorites() {
$scope.letters.forEach(function(letter){
$scope.lettersFavorites.forEach(function(favoriteLetter){
if(letter.id == favoriteLetter.letter_id) { // or something
letter.isFavorite = true;
}
})
})
}
$scope.getFavorites();
HTML
<button
id="addletter{{$index}}"
ng-click="addToFavorites($index)"
class="button button-dark button-small button-block icon ion-ios-heart-outline"
alt={{letter.letter}}>
<span data-ng-if="letter.isFavorite">Remove from favorites</span>
<span data-ng-if="!letter.isFavorite">Add to favorites</span>
</button>
I am trying to figure out how to organise and append html dynamically from Json.
the keys of the Json data are Image, id, link, ajaxlink. My html looks like this:
<div class="col s12 m6 l3">
<div class="card z-depth-4">
<div class="card-image waves-effect waves-block waves-light" style="height:350px">
<a href="#Url.Action("Movie", "Home", new { id ="", title = "", year="" })">
<img class="activat" src="">
</a>
</div>
<div class="card-content blue-grey darken-4">
<span class="card-title activator grey-text text-darken-1"><a class="a-title truncate" style="color:inherit">title</a><i class="material-icons right" onclick="loadDoc('id', 'ajax')">more_vert</i></span>
<p>Report broken link</p>
</div>
<div class="card-reveal blue-grey darken-4">
<span class="card-title grey-text text-darken-1 title-wrap"><i class="material-icons right">close</i></span>
<div id=""></div>
</div>
</div>
</div>
and my jquery is embarrassing
$(".tab a").click(function (e) {
var url = "";
var fillentry = $('#fillentry');
var test = $(e.target).text();
if (test === 'Top Viewed Today') {
var url = "http://topview-today";
} else if (test === 'Most Favorite') {
var url = "https://top-favorite";
} else if (test === 'Top Rating') {
var url = 'https://top-rating';
} else if(test === 'Top show'){
url = 'https://top-show';
}
else {
throw new Error('kill execution');
}
$.ajax({
url: '../../Home/tabcontent?=' + url,
type: "GET",
success: function (response) {
$.each($.parseJSON(response), function (i, item) {
fillentry.empty();
if (item.length) {
var fill1 = '<div class="card z- depth - 4" id="fill1">'+ '<div class="card-image waves-effect waves-block waves-light" style="height:350px">'+
'< a href= "#Url.Action("Movie", "Home", new { id ="", title = "", year="" })">' +
'<img class="activat" src="' + item.image + '">' +
'</a>'+
'</div >'
+ '<div class="card-content blue-grey darken-4">' +
'<span class="card-title activator grey-text text-darken-1">' + '<a class="a-title truncate" style="color:inherit">title</a>' + '<i class="material-icons right" onclick="loadDoc(' + item.id + ',' + item.ajax+ ')">more_vert</i>'+'</span>'
+'<p>'+'Report broken link'+'</p>'
+'</div>'+
'<div class="card-reveal blue-grey darken-4">'
+'<span class="card-title grey-text text-darken-1 title-wrap"><i class="material-icons right">close</i>'+'</span>'+
'<div id="">'+'</div>'+
'</div>' + '</div>';
fillentry.append(fill1);
}
});
I need to interate through the Json object and bind the data to the grid.
I am new to angular js. So, I want to highlight certain text from a HTML document.
My code is like -
service -
getDocumentAsHTML: function (docType, filename) {
var url = 'rez' + '/htmlContent/' + docType + '/' + filename;
var config = {};
config.headers = {
"Accept": "text/html",
"X-AUTH-TOKEN": loginService.getAuthToken()
};
return $http.get(url, config)
.then(function (response) {
return response.data;
},
function (error) {
$log.error(error);
return $q.reject(error);
});
},
and to highlight, I have written one function like -
$scope.highlight = function(content, text, className, notByWordBoundry){
var RegExpEscapeText, str;
if (!(content && content.replace)) {
return '';
}
if (!text) {
return $sce.trustAsHtml(content);
}
if (!className) {
className = 'mark';
}
RegExpEscapeText = text.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&");
if (!notByWordBoundry) {
str = new RegExp('(\\b)' + RegExpEscapeText + '(\\b)','gi');
} else {
str = new RegExp(RegExpEscapeText,'gi');
}
return $sce.trustAsHtml(content.replace(str , '<span class=' + className + '>$&</span>'));
};
So, I have a button , on click it opens a model which contains the html document where I can edit the document content. so, now I want to highlight a certain text from this document.So, for that
My html is -
<div id="htmlEditorModal" class="modal fade" role="dialog" aria-labelledby="confirmModal" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="confirmback()">×</button>
<h4 class="modal-title">
<strong>Edit Document</strong>
</h4>
</div>
<div class="modal-body">
<div ng-show="fetchingDocumentAsHTML || updatingDocumentAsHTML"
class="loading-backdrop">
<div class="spinner-container text-center">
<h3>
<strong>{{htmlEditorLoadingMsg}}</strong>
<span class="text-color"><i class="fa fa-spin fa-refresh"></i></span>
</h3>
</div>
</div>
<div text-angular
class="html-editor-container "
ng-hide="fetchingDocumentAsHTML || updatingDocumentAsHTML"
ng-model="htmlDocument">
</div>
</div>
<div class="modal-footer">
<button class="button-size btn btn-labeled btn-info pull-left"
ng-click="confirmback()">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
<span class="small-left-margin">Back</span>
</button>
<button class="button-size btn btn-primary pull-right"
ng-disabled="fetchingDocumentAsHTML || updatingDocumentAsHTML"
ng-click="updateDocument()"
<i class="fa fa-save" aria-hidden="true"></i>
<span class="small-left-margin">Save</span>
</button>
</div>
</div>
</div>
</div>
So, In this was planning to use
<span ng-bind-html="highlight(value, text)"></span>
I am not able to highlight the text.Can any one help me ?
So I am developing this app in which i want to apply pagination to list of templates.
template objects are stored in the list.
I am displaying thumbnails of templates on the page and I want to apply pagination for this page.
So far I have tried following solution but it didn't work.
It displaying the pagination correctly but when I click on the link its not updating the contents of the page.
list.html
<div class="container">
<div class="homepage-header">
<h2 class="homepage-title text-center wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown; -webkit-animation-name: fadeInDown;"> TEMPLATES </h2>
</div>
<div class="row">
<div class="col-md-6 col-sm-6" style="text-align: left">
<div class="form-inline">
<div class="form-group has-feedback has-clear">
<input type="text" class="form-control" ng-model="searchParam" ng-model-options="{ debounce: 400 }" placeholder="Search template ..."
/>
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" ng-click="searchParam = '';
retreivePageData(0);" ng-show="searchParam" style="pointer-events: auto; "></a>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6" style="text-align: right; vertical-align: middle; padding-right: 30px;">
<div class="form-inline">
{{selectedOption}}
<i class="fa fa-toggle-on fa-2x active" ng-if="status == true" ng-click="changeStatus();" title="Show component based templates"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();" title="Show image based templates"></i>
<button ng-click="newTemplateConfig()" class="btn btn-primary btn-xs" title="Add new template"><i class="fa fa-plus-circle fa-fw"></i>New Template</button>
</div>
</div>
</div>
<div class="homepage-ui-showcase-2-css row wow zoomIn animated" style="height: 402px;padding: 5px 0px; visibility: visible; animation-name: zoomIn; -webkit-animation-name: zoomIn;">
<div ng-repeat="(templateIndex, templateModel) in templatesList | filter:searchParam | limitTo: itemsPerPage">
<div class="active col-md-3 col-lg-3 col-sm-6 col-xs-12 mix design painting" style="display: inline-block;padding-top: 10px;"
ng-init="visible=false" ng-mouseover="visible=true" ng-mouseleave="visible=false">
<div class="portfolio-item shadow-effect-1 boxShadow" style="max-width: 250px;padding:0.3px;border:2px dotted #bebede;cursor: pointer">
<div class="mainBadge">
<kbd>{{templateModel.badge}}</kbd>
</div>
<div ng-switch on="{{templateModel.type !== undefined && templateModel.type === 'Annotate'}}">
<div ng-switch-when="false" style="height: 130px;" ui-sref="/designer/:pageId({pageId:templateModel.id})" class="portfolio-img ">
<i style="opacity:0.4;padding-top:35px;padding-left:15px;margin-left: 30%;" class="fa fa-puzzle-piece fa-4x"></i>
</div>
<div ng-switch-when="true" style="height: 130px;" ui-sref="annotator/:annotatedTemplateId({annotatedTemplateId:templateModel.id})"
class="portfolio-img ">
<i style="opacity:0.4;padding-top:35px;padding-left:15px;margin-left: 30%;" class="fa fa-file-image-o fa-4x"></i>
</div>
</div>
<div class="portfolio-item-content" title="{{templateModel.name}}">
<h3 class="header" style="font-size: 13px;text-align: center;display:inline;">
{{templateModel.name}}
</h3>
<small class="pull-right" ng-show="visible" style="display: inline; padding-top: 4px">
<div ng-switch on="{{templateModel.type !== undefined && templateModel.type === 'Annotate'}}">
<div ng-switch-when="true" href="#" class="btn btn-xs btn-danger" title="Generate Communication"
ui-sref="generateCommunication({mode:'A',id: templateModel.id})"
ng-disabled="!templateModel.dynamic_entity"> <!--style="color:#9d9d9;"-->
<i class="fa fa-file-pdf-o"></i>
</div>
<div ng-switch-when="false" href="#" class="btn btn-xs btn-danger" title="Generate Communication"
ui-sref="generateCommunication({mode:'T',id: templateModel.id})"
ng-disabled="!templateModel.dynamic_entity"> <!--style="color:#9d9d9;"-->
<i class="fa fa-file-pdf-o"></i>
</div>
</div>
</small>
</div>
</div>
</div>
</div>
</div>
<div class="row " style="margin-top: 10px; padding-top:0px;">
<div class="pagination-div pull-right" style="">
<!--<pagination class="pull-right" total-items="templatesList.length" ng-model="currentPage" max-size="maxSize" items-per-page="itemsPerPage"></pagination> -->
<uib-pagination total-items="templatesList.length" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" class="pagination-sm" items-per-page="itemsPerPage" boundary-link-numbers="true"></uib-pagination>
</div>
</div>
</div>
list.controller.js
'use strict';
angular.module('rapid').controller('HomeListController',
function($scope, $rootScope, $window, $modal, ServiceFactory, toaster, ReadFileService, AnnotationService, AnnotateService, DocumentService) {
$scope.templatesList = [];
$scope.selectedOption = 'All';
$scope.annotateTemplateMeta = [];
$scope.rapidTemplateMeta = [];
$scope.maxSize = 5;
$scope.init = function() {
$scope.status = true;
$scope.selectedOption = "Image Based";
$scope.retrieveTemplates($scope.status);
$scope.currentPage = 1;
};
$scope.changeStatus = function(){
$scope.status = !$scope.status;
$scope.retrieveTemplates($scope.status);
};
$scope.retrieveTemplates = function(selectedOption) {
$scope.templatesList = [];
if(selectedOption) {
$scope.selectedOption = "Image Based";
$scope.fetchAnnotationTemplates("Annotate");
} else {
$scope.selectedOption = "Component Based";
$scope.fetchRapidTemplates("Rapid");
}
};
$scope.fetchAnnotationTemplates = function(selectedOption) {
AnnotateService.get().$promise.then(function(result) {
$scope.annotateTemplateMeta = result[0];
console.log('Annotated template count :: ' + result[0].length);
if (selectedOption === 'All') {
$scope.fetchRapidTemplates(selectedOption);
} else {
$scope.prepareTemplateList(selectedOption);
}
});
};
$scope.fetchRapidTemplates = function(selectedOption) {
ServiceFactory.PagesService.getAllPages().$promise.then(function(result) {
$scope.rapidTemplateMeta = result[0];
console.log('Rapid template count :: ' + result[0].length);
$scope.prepareTemplateList(selectedOption);
});
};
$scope.prepareTemplateList = function(selectedOption) {
$scope.itemsPerPage = 1;
var getPaginatedTemplateList = 'getList';
$scope.currentPage = 0;
if (selectedOption === 'Annotate') {
$scope.annotateTemplateMeta.forEach(function(annotate) {
var templateObject = {};
templateObject = { id: annotate.id, name: annotate.name, type: "Annotate", dynamic_entity:annotate.dynamic_entity, badge:"Image Based" };
$scope.templatesList.push(templateObject);
});
} else if (selectedOption === 'Rapid') {
$scope.rapidTemplateMeta.forEach(function(rapidTemplate) {
var templateObject = {};
templateObject = { id: rapidTemplate._id, name: rapidTemplate.name, type: "Component", dynamic_entity:rapidTemplate.pageObj.entity, badge:"Component Based" };
$scope.templatesList.push(templateObject);
});
//alert('Rapid count '+selectedOption + $rootScope.rapidTemplateMeta.length);
} else {
$scope.annotateTemplateMeta.forEach(function(annotate) {
var templateObject = {};
templateObject = { id: annotate.id, name: annotate.name, type: "Annotate", dynamic_entity:annotate.dynamic_entity, badge:"Image Based" };
$scope.templatesList.push(templateObject);
});
$scope.rapidTemplateMeta.forEach(function(rapidTemplate) {
var templateObject = {};
templateObject = { id: rapidTemplate._id, name: rapidTemplate.name, type: "Component", dynamic_entity:rapidTemplate.pageObj.entity, badge:"Component Based" };
$scope.templatesList.push(templateObject);
});
$scope.totalItems = $scope.templatesList.length;
$scope.maxSize = 5;
}
//$scope.retreivePageData(0);
};
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
alert('Page changed to: ' + $scope.currentPage);
});
};
$scope.newTemplateConfig = function (size) {
var modalInstance = $modal.open({
backdrop: 'static',
keyboard: false,
animation: $scope.animationsEnabled,
templateUrl: 'scripts/app/home/modal/template.modal.html',
controller: 'TemplateModalCtrl',
size: size,
resolve: {templateModel: function () {
return null;
},
title: function () {
return 'Create New Template';
},
templateType: function() {
if($scope.status) {
return 'Annotate';
} else {
return 'Rapid'
}
}
}
});
modalInstance.result.then(function (saveAnnotatedTemplateConfig) {
alert('modal result')
//$scope.saveAnnotatedTemplateConfig(saveAnnotatedTemplateConfig.templateConfigModel);
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
};
$scope.init();
});
Is there anything wrong with my code?
Please provide some inputs on this.
You can use ui-grid directive to solve your pagination problem.
Please refer to the ui-grid API.
Checkout these 2 plunkers :
Plunker 1
Plunker 2