I have tried to implement this paging solution that I found online from this link:
http://jasonwatmore.com/post/2016/01/31/AngularJS-Pagination-Example-with-Logic-like-Google.aspx
I think the issue is in the way the functions are called, because the setPage function gets called before I have all my data so it does not know how many total items there are to be displayed etc. Can someone take a quick look and see what I'm doing wrong?
function HistoryController($window, $scope, $modal, $state, toaster, PagerService, HistoryFactory, $timeout) {
var vm = this;
vm.uploads = [];
vm.includeCancelled = false;
vm.uploadDataModal = {};
vm.pager = {};
vm.setPage = setPage;
activate();
function activate() {
getHistory();
vm.setPage(1);
}
function setPage(page) {
if (page < 1 || page > vm.pager.totalPages) {
return;
}
// get pager object from service
vm.pager = PagerService.GetPager(vm.uploads.length, page);
// get current page of items
vm.items = vm.uploads.slice(vm.pager.startIndex, vm.pager.endIndex + 1);
}
function getHistory() {
HistoryFactory.getHistory(vm.includeCancelled).then(
function(response) {
_.each(response.data, function(upload) {
upload.inProgress = upload.status && ['INPROGRESS','NEW'].indexOf(upload.status.statusCd.trim()) > -1;
});
vm.uploads = response.data;
if($state.params.reupload){
uploadProductionData();
$state.params.reupload = false;
}
});
}
Here is the html
<div class="chrthdr" ui-view="header"></div>
<div id="userResults">
<div class="card card-full-width">
<div class="card-header dark-blue">
<a class="card-config" data-toggle="uploadHistory" data-placement="left"><i class="glyphicon glyphicon-info-sign"></i></a>
<div class="card-title">Data History</div>
</div>
<div class='form-horizontal range-date' style="overflow-y: auto;">
<form>
<div class="panel-body">
<div>
<span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; margin-right: 5px" type="button" ng-click="vm.uploadProductionData()">Upload Data</span>
<label>
<input type="checkbox" ng-model="vm.includeCancelled">Include removed executions
</label>
<!--<span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; margin-left: 5px" type="button" ng-click="vm.viewTemplates()">Download Template</span>-->
</div>
<div>
<table class="table">
<tr>
<th>Upload Date</th>
<th>Product</th>
<th>Comments</th>
<th>Template</th>
<th>Last Updated By</th>
<th>Last Updated</th>
<th>Status</th>
<th>Actions</th>
</tr>
<tr ng-repeat="upload in vm.uploads | orderBy:'uploadDate':true">
<td style="white-space: nowrap;">{{upload.uploadDate}}</td>
<td>{{upload.product}}</td>
<td style="white-space: nowrap;">{{upload.comments}}</td>
<td style="white-space: nowrap;">{{upload.templateName}}</td>
<td style="white-space: nowrap;">{{upload.lastUpdatedByUser}}</td>
<td style="white-space: nowrap;">{{upload.lastUpdateDate}}</td>
<td style="white-space: nowrap;">{{upload.status.statusName}}</td>
<td>
<button class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; " ng-hide="upload.status.statusCd === 'NEW' || upload.status.statusCd === 'ERROR'" ng-click="vm.loadStagingPage(upload.dataLoadExecutionId, upload.product, upload.status)">View</button>
<span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; " type="button" ng-click="vm.cancelDataExecution(upload.dataLoadExecutionId)" ng-show="upload.inProgress || upload.status.statusCd === 'ERROR'">Remove</span>
</td>
</tr>
</table>
</div>
<div class="text-center">
<ul ng-if="vm.pager.pages.length" class="pagination">
<li ng-class="{disabled:vm.pager.currentPage === 1}">
<a ng-click="vm.setPage(1)">First</a>
</li>
<li ng-class="{disabled:vm.pager.currentPage === 1}">
<a ng-click="vm.setPage(vm.pager.currentPage - 1)">Previous</a>
</li>
<li ng-repeat="page in vm.pager.pages" ng-class="{active:vm.pager.currentPage === page}">
<a ng-click="vm.setPage(page)">{{page}}</a>
</li>
<li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
<a ng-click="vm.setPage(vm.pager.currentPage + 1)">Next</a>
</li>
<li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
<a ng-click="vm.setPage(vm.pager.totalPages)">Last</a>
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
This is a very common mistake of not understanding asynchronous calls.
HistoryFactory.getHistory(vm.includeCancelled).then({}) is async, meaning that it will make the call and then continue executing code after the async call. When the async call has finished, the code inside .then({}) will then execute which could be 5 milliseconds or 5 seconds.
So here:
function activate() {
getHistory(); // async call, doesn't wait
vm.setPage(1); // executed immediately after, data not ready
}
Needs to be:
function activate() {
getHistory();
}
And changegetHistory() to:
function getHistory() {
HistoryFactory.getHistory(vm.includeCancelled).then(
function(response) {
_.each(response.data, function(upload) {
upload.inProgress = upload.status && ['INPROGRESS','NEW'].indexOf(upload.status.statusCd.trim()) > -1;
});
vm.uploads = response.data;
if($state.params.reupload){
uploadProductionData();
$state.params.reupload = false;
}
// Now call setPage after data is finished
vm.setPage(1);
});
}
Related
I am using mongoose-paginate-v2 on the backend to paginate the response from my DB. I am trying to setup the front end to move through the data and send a request for the new data as needed. (That part seems to be working). The problem I am having is the DOM seems to freak out after pressing the next / back buttons a few times. VIDEO of problem which is at the end of the 20sec vid: (https://drive.google.com/file/d/1btfeKqXELEMmBnFPpkCbBLY5uhrC1bvE/view?usp=sharing)
What I have tried: I have tried .emtpy, .remove, and now .replace all seem to have the same problem. I have also moved the code around to try and make it unti the prior .then() was complete. Here is the code:
Front End:
<% include ../partials/header%>
<div class="container-fluid pt-3">
<div class='row'>
<div class="col-md-1">
<button class="btn btn-outline-primary sticky-top">Start New Call</button>
</div>
<div class="col-md-11">
<table class="table">
<thead class="sticky-top">
<tr>
<th scope="col">Incident #</th>
<th scope="col">Type</th>
<th scope="col">Location</th>
<th scope="col">Units</th>
<th scope="col">Dispatch</th>
<th scope="col">Clear</th>
<th scope="col">Disposition</th>
<th scope="col">Recall</th>
</tr>
</thead>
<tbody id="callTable">
<tr id="row1"><td></td></tr>
<tr id="row2"><td></td></tr>
<tr id="row3"><td></td></tr>
<tr id="row4"><td></td></tr>
<tr id="row5"><td></td></tr>
<tr id="row6"><td></td></tr>
<tr id="row7"><td></td></tr>
<tr id="row8"><td></td></tr>
<tr id="row9"><td></td></tr>
<tr id="row10"><td></td></tr>
</tbody>
</table>
<div class="row">
<div class="col-3"></div>
<div class="text-center col-2">
<button id="back" class="btn btn-outline-success mr-auto"><i class="fas fa-step-backward"></i><strong>Back</strong></button>
</div>
<div class="justify-content-center d-flex col-2 align-items-center">
<strong>Page <span id="pgnum">##</span> of <span id="totalpgs">##</span></strong>
</div>
<div class="text-center col-2">
<button id="next" class="btn btn-outline-success ml-auto"><strong>Next</strong><i class="fas fa-step-forward"></i></button>
</div>
<div class="text-center col-3"></div>
</div>
</div>
</div>
</div>
<% include ../partials/footer %>
<script>
//Data Management Script
let list=[];
axios.get('/api/cnc/incidents')
.catch(err=>{
console.log(err);
})
.then(data=>{
return list=data;
})
//Setup Function to get data...
async function getPage(page){
axios.get('/api/cnc/incidents/'+page)
.catch(err=>{
console.log(err);
})
.then(response=>{
console.log(response);
calls = response.data.docs;
callNumber = 'Not Assigned';
next = response.data.hasNextPage,
back = response.data.hasPrevPage,
nextPage = response.data.nextPage,
prevPage = response.data.prevPage;
$('#pgnum').text(response.data.page);
$('#totalpgs').text(response.data.totalPages);
if(next === true){
$('#next').removeAttr('disabled');
$('#next').click(function () {
getPage(nextPage);
});
}else{
$('#next').attr('disabled', 'disabled');
}
if(back === true){
$('#back').removeAttr('disabled');
$('#back').click(function () {
getPage(prevPage);
});
}else{
$('#back').attr('disabled', 'disabled');
}
// activities.sort((a, b) => b.date - a.date)
calls.sort((a, b) => (a.times.dispatch > b.times.dispatch) ? -1 : 1)
return calls;
}).then(calls=>{
let i = 1;
calls.forEach(call => {
//Set default callNumber.
callNumber = 'Not Assigned'
//Update to call number from DB.
if(call.incidentNumber){
callNumber = call.incidentNumber;
}
//Change _id to Radio ID.
if(call.units.length > 0){
let assignedUnits = call.units;
let idArray = list.data[0];
const filtered = [];
function compare(assignedUnits,idArray){
assignedUnits.forEach((unit)=>{
idArray.forEach((unitId)=>{
if(unit === unitId._id){
filtered.push(unitId.id);
}
})
})
return filtered;
}
compare(assignedUnits, idArray);
callUnits = filtered.join(', ');
}else{
callUnits = ['None']
}
if(typeof call.disposition !== 'undefined'){
callDisposition = call.disposition.selected;
}else{
callDisposition = '';
}
if(call.times.clear === undefined){
callClear = '';
}else{
callClear = call.times.clear;
}
//Insert Data into DOM. and make TR the link to edit
$('#row'+i).replaceWith('<tr id="row'+i+'" onClick="editRun(\''+call._id+'\')"><th>'+callNumber+'</th><td>'+call.callType+'</td><td>'+call.address.placeName+' '+call.address.streetAddress+'</td><td>'+callUnits+'</td><td>'+call.times.dispatch+'</td><td>'+callClear+'</td><td>'+callDisposition+'</td><td id="recall">'+call.recall.length+' personnel</td></tr>');
i++;
});
})
}
//Get the first page of data...
getPage(1);
function editRun(runId){
window.location.href= '/api/cnc/incident/input/'+runId;
}
//Update Navbar correctly
$('document').ready(function(){
$('.top-nav').removeClass('active').addClass('text-light').removeClass('text-dark');
$('#incidentTab').addClass('active').addClass('text-dark').removeClass('text-light');
});
</script>
I have to scroll in a particular block(in may case table) when I will click on button.
vm.uploadOmrFile = function() {
vm.formSubmitted = true;
if (!vm.partners) {
return;
} else if (!vm.omrConfigurations) {
return;
} else if (!vm.schools) {
return;
} else if (!vm.classes) {
return;
}
formdata.append('classId', vm.configuration.classId);
// formdata.append('omrConfigId', vm.configuration.omrConfigId);
formdata.append('schoolId', vm.configuration.schoolId);
// formdata.append('tenantId', vm.configuration.tenantId);
var request = {
method: 'POST',
url: xxxxxx,
data: formdata,
transformRequest : angular.identity,
headers: {
'Content-Type': undefined
}
};
// SEND THE FILES.
$http(request)
.success(function (d) {
vm.badrecords = 0;
vm.uploadresponse = d;
vm.records = d.studentAssessments;
vm.records.forEach(function(record){
if(record.output.type == 'invalid-csv') {
vm.badrecords += 1;
}
})
})
.error(function (error) {
toastr(error);
});
setTimeout(function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.path('/omr-upload');
$location.hash('message');
$anchorScroll();
}, 20000);
}
This is html file
<!doctype html>
<html>
<div class="modal-footer">
<button ng-click="vm.uploadOmrFile()" formnovalidate
class="btn btn-success" value="Upload"
dismiss="modal">Upload</button>
<button type="button" class="btn btn-danger" data-
dismiss="modal">Cancel</button>
</div>
<tr>
<td class="nopadding noborder">
<table class="table">
<tr>
<td colspan="4">
<div class="alert alert-danger" id="message" ng-
if="vm.uploadresponse vm.uploadresponse.hasError"
role="alert">{{vm.uploadresponse.hasError}}
<strong>{{vm.uploadresponse.message}}</strong>
<br> Total Records Parsed:{{vm.records.length}}
<br>RecordsError: {{vm.badrecords}}
</div>
<div class="alert alert-success" id="message" ng-
if="vm.uploadresponse && !vm.uploadresponse.hasError">
<strong>{{vm.uploadresponse.message}}</strong>
<br> Total Records Parsed : {{vm.records.length}}
<br>Records with Error: 0
</div>
</td>
</tr>
<tr ng-if="vm.uploadresponse &&
vm.uploadresponse.hasError">
<th>Name</th>
<th>Sheet ID</th>
<th>Record Type</th>
<th>Messages</th>
</tr>
<tr ng-repeat="record in vm.records" ng-
if="vm.uploadresponse && vm.uploadresponse.hasError">
<td>{{record.name}}</td>
<td>{{record.omrsheet}}</td>
<td>{{record.output.type}}</td>
<td>
<div style="height:100px;overflow-y:scroll">
<div ng-repeat="msg in record.output.messages"
class="error">
<p>{{msg}}</p>
</div>
</div>
</td>
</tr>
<tr ng-if="vm.uploadresponse &&
!vm.uploadresponse.hasError">
<td>
<h2><i class="glyphicon glyphicon-thumbs-up" aria-
hidden="true"></i> All records fine!
<button class="btn btn-warning btn-lg" ng-
click="vm.saveOMR()">Click to Save OMR
data</button>
</h2>
</td>
</tr>
</table>
</td>
</tr>
</html>
My problem is when i Click to upload button It should go table section of html and upload button calling "uploadOmrFile()".
In my case scroll not going to table section.
I am using id as "message", which is uses location.hash.
setTimeout(function()
{
document.getElementById('message').scrollIntoView({block: 'start',
behavior: 'smooth'}); },1000);`
Paste This code After getting response
This question already has answers here:
How to $http Synchronous call with AngularJS
(7 answers)
Closed 5 years ago.
Hi Everyone I have the following due to some situation on one of my projects.
I'm working with angular-xeditable, it has a method onbefore save which should returns a string in case I want the from to maintain opened(editable) and true in case I want to form to be closed(not editable).
Now the problem, below you will find my code for one angular function
self.validateBeforeSave = function(data, id){
var current_id = id;
$http.post('data/functions.php', {
action : 'updateQuotasDisease',
sqlPeriod : data.period,
sqlDiseaseCode : data.disease_code,
sqlTargetCountry : data.target_country,
sqlTargetSpecialty : data.target_specialty,
sqlChartsAmount : data.charts_amount,
sqlAmount : data.amount,
sqlStatus : data.status
})
.success(function(response) {
if(response == 'quota-exists'){
$("#"+current_id).css("background-color", "#ffc4c4");
swal("That quota already exists!", "", "error");
return "error-msg";
}
else{
$("#"+current_id).css("background-color", "#ffffff");
return true;
}
})
.error(function(response) {
console.log('Error: ' + response);
});
};
This code is being called from this HTML, but basically what matters is the need of a return from previous functions of true or "string", you can find onbeforesave="$ctrl.validateBeforeSave($data, line.id)" from there I'm calling the previous function.
<table class="table general-tables table-responsive" ng-show="$ctrl.VisibleQuotasDisease">
<thead>
<tr>
<th>Actions</th>
<th>Period</th>
<th>Disease code</th>
<th>Target country</th>
<th>Target specialty</th>
<th>Charts amount</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="line in $ctrl.quotasDisease" id="{{line.id}}">
<td style="white-space: nowrap">
<!-- onaftersave="$ctrl.saveRowDisease($data, line.id, line) validateBeforeSave" -->
<form editable-form name="rowform" onbeforesave="$ctrl.validateBeforeSave($data, line.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == line">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-xs btn-primary">
<i class="fa fa-2x fa-save"></i>
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-xs btn-default">
<i class="fa fa-2x fa-close"></i>
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<button class="btn btn-xs btn-warning" ng-click="rowform.$show()">
<i class="fa fa-2x fa-edit"></i>
</button>
<button class="btn btn-xs btn-danger" ng-click="$ctrl.removeRowDisease($index, line)">
<i class="fa fa-2x fa-trash-o"></i>
</button>
</div>
</td>
<td>
<span editable-text="line.period" e-class="period-inputs" e-name="period" e-form="rowform" e-maxlength="7" e-required>
{{line.period}}
</span>
</td>
<td>
<span editable-text="line.disease_code" e-name="disease_code" e-form="rowform" e-maxlength="2" e-required>
{{line.disease_code}}
</span>
</td>
<td>
<span editable-text="line.target_country" e-name="target_country" e-form="rowform" e-maxlength="2" e-required>
{{line.target_country}}
</span>
</td>
<td>
<span editable-text="line.target_specialty" e-name="target_specialty" e-form="rowform" e-maxlength="4" e-required>
{{line.target_specialty}}
</span>
</td>
<td>
<span editable-text="line.charts_amount" e-name="charts_amount" e-form="rowform" e-onkeypress="return onlyInt(event)" e-required>
{{line.charts_amount}}
</span>
</td>
<td>
<span editable-text="line.amount" e-name="amount" e-form="rowform" e-onkeypress="return onlyInt(event)" e-required>
{{line.amount}}
</span>
</td>
<td>
<span editable-text="line.status" e-name="status" e-form="rowform" e-onkeypress="return onlyInt(event)" e-required>
{{line.status}}
</span>
</td>
</tr>
</tbody>
</table>
Finnaly I want to do the question how can I do a return from inside the success section of $http post or how can I workaround to solve this situation.
Thanks in advance.
Just as another piece of code here the php function that I'm calling
if($request -> action == 'updateQuotasDisease'){
$period_sql = $request -> sqlPeriod;
$disease_code_sql = $request -> sqlDiseaseCode;
$target_country_sql = $request -> sqlTargetCountry;
$target_specialty_sql = $request -> sqlTargetSpecialty;
$charts_amount_sql = $request -> sqlChartsAmount;
$amount_sql = $request -> sqlAmount;
$status_sql = $request -> sqlStatus;
$existing_record = connDB() -> getOne("SELECT count(*) FROM quota_period WHERE period_field = '$period_sql' AND disease_code_numeric = '$disease_code_sql' AND targeted_country = '$target_country_sql' AND targeted_specialty_numeric_code = '$target_specialty_sql' AND amount = $amount_sql AND patient_cases_amount = $charts_amount_sql AND status = $status_sql;");
if($existing_record < 1){
connDB() -> query("UPDATE quota_period SET period_field = '$period_sql', disease_code_numeric = '$disease_code_sql', targeted_country = '$target_country_sql', targeted_specialty_numeric_code = '$target_specialty_sql', patient_cases_amount = $charts_amount_sql, amount = $amount_sql, status = $status_sql WHERE period_field = '$period_sql' AND disease_code_numeric = '$disease_code_sql' AND targeted_country = '$target_country_sql' AND targeted_specialty_numeric_code = '$target_specialty_sql';");
}
else{
echo "quota-exists";
}
}
First of all, your return is returning only to success call/caller. It can't be caught outside from success.
The second thought is from the ajax call. http post from angular was written to be always asynchronous. So, your function will never wait for the ajax request be completed.
But you can use the $q module to make the function will "wait" and receive the result to return it.
It's something like this:
function() {
var deferred = $q.defer();
$http.post('data/functions.php', arguments);
.success(function(response) {
//your code
//resolve the promise
deferred.resolve('request successful');
})
.error(function(data,status,headers,config){
//reject the promise
deferred.reject('ERROR');
});
return deferred.promise;
}
You only may to ensured the result which you want from deferred.promise (which I don't know that).
You can see a bit more in these links above:
To then() or to success() in AngularJS
How to $http Synchronous call with AngularJS
how to make synchronous http request in angular js
I'm doing client-side pagination using angular ui-bootstrap pagination to add paging to the list and then I'm getting a problem that the sorting and filtering process only sort and filter the data only in the current page.
Here is the code snippets in view to display the data:
<tr ng-repeat="reminderType in reminderTypes | filter: paginate | filter: searchText | orderBy:sortBy:sortDescending">
<td>
<a class="btn btn-sm btn-primary" ng-click="editReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
<a class="btn btn-sm btn-info" ng-click="detailsReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-eye-open"></i> View</a>
</td>
<td>{{reminderType.Name}}</td>
<td>{{reminderType.EmailTemplate}}</td>
</tr>
...
<uib-pagination class="pagination-sm"
total-items="totalItems" max-size="maxSize" items-per-page="numPerPage" num-pages="numPages"
ng-model="currentPage" boundary-links="true" rotate="false"></uib-pagination>
and here is the code snippets in controller to do the pagination:
$scope.maxSize = 3;
$scope.totalItems = 7;
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.reminderTypes.indexOf(value);
return (begin <= index && index < end);
};
I also check this link on SO, but it doesn't work.
How to make this work to sort and filter the data across the page?
I've posted the complete code in plnkr
For some reason I'm unable to fork your plunkr, but here is a fix. The JS:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
$scope.reminderTypes = [{"ReminderTypeID":1,"Name":"STAMPING OF SPA","EmailTemplate":null},{"ReminderTypeID":2,"Name":"CONDITION PRECEDENT","EmailTemplate":null},{"ReminderTypeID":3,"Name":"STATE AUTHORITY CONSENT","EmailTemplate":null},{"ReminderTypeID":4,"Name":"PAYMENT OF BALANCE PURCHASE PRICE","EmailTemplate":null},{"ReminderTypeID":5,"Name":"CKHT FILING","EmailTemplate":null},{"ReminderTypeID":6,"Name":"TRANSFER FORM 14A","EmailTemplate":null},{"ReminderTypeID":7,"Name":"TRANSFER NOTICE OF ASSESSMENT","EmailTemplate":null}]
$scope.sortBy = 'Name';
$scope.sortDescending = false;
$scope.filteredRT = angular.copy($scope.reminderTypes);
$scope.searchText = '';
$scope.maxSize = 3;
$scope.totalItems = 7;
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.filteredRT.indexOf(value);
return (begin <= index && index < end);
};
$scope.filter = function(){
var results = $scope.filteredRT;
results.length = 0;
var searchText = $scope.searchText;
var reminderTypes = $scope.reminderTypes;
for(var i = 0; i < reminderTypes.length; ++i){
if(searchText.length > 0){
if(reminderTypes[i].Name.includes(searchText)){
results.push(reminderTypes[i]);
}
} else {
results.push(reminderTypes[i]);
}
}
$scope.totalItems = results.length;
}
});
And the HTML
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PagerDemoCtrl">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<p>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<input type="text" class="form-control" placeholder="Enter Search Text"
ng-model="searchText" ng-change="filter()" />
</div>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped table-hover table-condensed">
<thead>
<tr class="bg-info">
<th></th>
<th>
<a ng-click="sortBy = 'Name'; sortDescending = !sortDescending">Reminder Type Name</a>
<span ng-show="sortBy == 'Name' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortBy == 'Name' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
</th>
<th>
<a ng-click="sortBy = 'EmailTemplate'; sortDescending = !sortDescending">Email Template</a>
<span ng-show="sortBy == 'EmailTemplate' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
<span ng-show="sortBy == 'EmailTemplate' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="reminderType in filteredRT | filter: paginate | orderBy:sortBy:sortDescending">
<td>
<a class="btn btn-sm btn-primary" ng-click="editReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
<a class="btn btn-sm btn-info" ng-click="detailsReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-eye-open"></i> View</a>
</td>
<td>{{reminderType.Name}}</td>
<td>{{reminderType.EmailTemplate}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right">
Showing page {{currentPage}} of {{numPages}}
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<uib-pagination class="pagination-sm"
total-items="totalItems" max-size="maxSize" items-per-page="numPerPage" num-pages="numPages"
ng-model="currentPage" boundary-links="true" rotate="false"></uib-pagination>
</div>
</div>
</div>
</body>
</html>
In particular, I added a ngChange directive in the input filter, and now a copy of reminderTypes is used. Unfortunately, I think that what you aim to do is a bit too complex to work with angular filters alone. I didn't test the order by but the pagination seems to work just fine in this way.
EDIT : juste adding the correct fork that respond to the question: https://plnkr.co/edit/HMw8U4OUsW5DNDGfQKHY?p=preview
In the following html code, when one row is in an editing mode(the edit button on this row is clicked), the edit button on the rest of the rows shall be disabled. And when one row is in the edit mode, data will show up in a text input field.
<table class="table">
<thead>
<tr>
<th class="col-sm-4">Branch Name</th>
<th class="col-sm-3">Branch ID</th>
<th class="col-sm-3">Foo</th>
<th class="col-sm-1">Doo</th>
<th class="col-sm-3"></th>
</tr>
</thead>
<tr ng-repeat="branch in branches">
<td id="name" ng-bind="branch.name"></td>
<td id="ID" ng-bind="branch.id"></td>
<td id="foo" data-editable>
<span ng-hide="editMode" ng-bind="branch.foo"></span>
<input class="form-control" data-ng-show="editMode" id="foo" data-ng-model="branch.foo"/>
</td>
<td id="doo" data-editable>
<span ng-hide="editMode" ng-bind="branch.doo"></span>
<input class="form-control" data-ng-show="editMode" id="do" ng-model="branch.doo"/>
</td>
<td>
<button type="submit" class="btn btn-default" data-ng-disabled="editing" data-ng-show="!editMode" data-ng-click="editMode = true; editEntry(branch)">Edit</button>
<span ng-show="editMode" class="pull-right">
<button type="submit" class="btn btn-default" data-ng-disabled="!enableToSave(branch)" data-ng-click="editMode = false; saveEntry(branch)">Save</button>
<button type="submit" class="btn btn-default" ng-show="editMode" data-ng-click="editMode = false; cancelEditing(branch)">Cancel</button>
</span>
</td>
</tr>
</table>
The control mechanics is the "editMode".The Javascript/AngulaJS code is something like the followings:
$scope.editing = false;
$scope.editEntry = function(branch) {
if ($scope.editing !== false) {
...
} else {
$scope.editing = true;
....
}
}
$scope.saveEntry = function(branch){
...
$scope.editing = false;
}
$scope.cancelEditing = function(branch){
if ($scope.editing !== false) {
$scope.editing = false;
...
}
}
$scope.enableToSave = function(branch){
...
}
The approach, however, doesn't seem to be reliable. Any better approaches?
Try to use ng-repeat instance instead of single model
Like this
<button type="submit" class="btn btn-default" data-ng-disabled="branch.isDisable" data-ng-click="saveEntry(branch)">Save</button>
<button type="submit" class="btn btn-default" ng-show="branch.isDisable" data-ng-click="cancelEditing(branch)">Cancel</button>
Create a mapper when click on edit make other disabled
Like this
$scope.editEntry = function(branch) {
branch.isDisable=false;
$scope.branches.forEach(function(x){
if(x.id!=branch.id)
x.isDisable=true;
})
}
You need a parametric check on your table:
<tr ng-repeat="branch in branches" ng-disabled="editingOther(branch.id)">
...
<button type="submit" class="btn btn-default" data-ng-disabled="editing" data-ng-click="editEntry(branch)">Edit</button>
then in Angular
$scope.editing = false;
$scope.editing_entry = null;
$scope.editEntry = function(branch) {
$scope.editing = true;
$scope.editing_entry = branch.id;
}
$scope.editingOther = function(branch_id) {
return $scope.editing && $scope.editing_entry != branch_id;
}
I put a ng-disabled on the tr element as an example, you will need to build your own desired logic for the other rows.