Develop Reference

smart-table slow performance while displaying large data set

Im trying to display large data set using smart-table. Im contacting server with $http request and when I assign response data to $scope.rowCollection, application stuck for nearly 40 second until all data is displayed on page. In response json i got nearly 18000 results to display. I dont know if I do something wrong. I get response from server in 600 ms but after assign application stuck. It looks like smart-table is trying to make a copy of response in displayedCollection array and this operation take long time but its only my opinion. Please help. Thanks in advance.
HTML
<table st-table="displayedCollection" st-safe-src="rowCollection" class="table">
<thead>
<tr>
<th colspan="8"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th>
</tr>
<tr>
<th st-sort="TestEndDate">Test Date</th>
<th st-sort="Workplace">Workplace</th>
<th st-sort="Tester">Worker</th>
<th st-sort="SerialNo">Serial Number</th>
<th st-sort="TestProgram">Testing program</th>
<th st-sort="TestResult">Test Result</th>
<th>Download</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in displayedCollection">
<td>{{row.TestEndDate | date}}</td>
<td>{{row.Workplace}}</td>
<td>{{row.Tester}}</td>
<td>{{row.SerialNo}}</td>
<td>{{row.TestProgram}}</td>
<td>{{row.TestResult}}</td>
<td>
<button type="button" ng-click="downloadItem(row)" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-download">
</i>
</button>
</td>
<td>
<button type="button" ng-click="detailItem(row)" class="btn btn-sm btn-primary">
<i class="glyphicon glyphicon-eye-open">
</i>
</button>
</td>
</tr>
</tbody>
</table>
Javascript
app.controller('AppController', ['$scope', '$http', '$modal', function ($scope, $http, $modal) {
var search = this;
search.serials = [];
$scope.rowCollection = [];
$scope.init = function () {
waitingDialog.show();//show loading
getTestResults();
};
var getTestResults = function () {
$http({
method: 'GET',
url: "http://sqldev/api/testresults"
}).then(function successCallback(response) {
$scope.rowCollection = response.data;//after assign response.data into rowCollection application stuck
waitingDialog.hide();//hide loading
}, function errorCallback(response) {
console.log('Error: ' + response);
waitingDialog.hide();//hide loading
$scope.open()//open modal with error message
});
};
}]);

Displaying JSON content in table rows using angularjs and codeigniter

I'm just trying to fetch contents from server and display it in a table using Angularjs. I'm been trying this from a while, but did not got any solution yet. Btw, I'm working on CodeIgniter framework.
Here is my CodeIgniter controller;
public function list_agents() {
if($this->is_logged_in ()) {
$agents = $this->generic_model->general_fetch('agent_master');
echo json_encode($agents);
}
else {
redirect(base_url());
}
}
In the above code, instead of echo I used print, print_r also.. But still its not working.
Here is my js file function;
(function () {
var addApp = angular.module('agentApp', ['ngRoute']);
addApp.controller('agentAddController', function ($scope, $http, growl) {
$scope.receivedData = [];
$http({
method : 'POST',
url : 'agent/list_agents',
headers : {
"Content-Type" : "application/json"
}
}).then(function (data) {
$scope.receivedData = JSON.parse(data);
});
});
})();
And in this above code I used with and without JSON.parse function. Didn't got the correct result.
Here is my view;
<section class="content" ng-app="agentApp" ng-controller="agentAddController">
<div class="row">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Manage Agents</h3>
</div>
<div class="box-body">
<table class="table table-striped table-bordered" id="agents_table">
<thead>
<tr>
<th>Sl No.</th>
<th>Agent Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<div ng-repeat="data in receivedData">
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ data.agent_name }}</td>
<td><button class="btn btn-warning btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></button></td>
</tr>
</div>
</tbody>
<tfoot>
<tr>
<th>Sl No.</th>
<th>Agent Name</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</section>
I know if I put ng-repeat inside tr tag I'll get the perfect result, but I don't want to do that because, I'm working with adminLTE. So there is a function DataTable() in adminLTE where it'll apply search and pagination to the table. If I give ng-repeat to tr, these functionalities can not be added.

Try: $scope.receivedData = JSON.parse(data.data);
The response object is not only the data itself, that's why the 5 rows. It gives back, data, headers, status, etc...
https://docs.angularjs.org/api/ng/service/$http

AngularJS: how to change button text onclick rendered using ng-repeat

I have the following HTML + AngularJS code:
<table class="table table-hover">
<thead>
<tr>
<th width="80%">Task</th>
<th width="10%">Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in task_list track by $index">
<td>{{task.title}}</td>
<td>
<button ng-click="delete_task($index)" class="btn btn-success btn-xs">Completed</button>
</td>
</tr>
</tbody>
</table>
This generate a list of task like in the following image:
View image
When I click on the "Complete" button I am sending an http request to server, and that part is working fine. What I am trying to achieve is, when I click on the button the button text should change to 'Please wait'.
How can I achieve this using AngularJS without using jQuery.

You can do something like this. The following code will change the status of button while submitting to submitting. Once complete it will change to completed and also disable the button.
Html
<tr ng-repeat="task in task_list track by $index">
<td>{{task.title}}</td>
<td>
<button ng-disabled="task.disabled" ng-click="delete_task($index)" class="btn btn-success btn-xs">{{task.status ? task.status : 'complete'}}</button>
</td>
</tr>
Javascript
$scope.delete_task = function(index) {
var task = $scope.task_list[index];
task.status = 'submitting';
$http.get('post.json').then(function(res) {
task.status = 'completed';
task.disabled = true;
});
};
Here is working plunkr

Delete row in AngularJS + NodeJS + Postgresql

why I can delete row in frontend but its not deleted in postgresql ?
I've been copy-paste the code from other menu in my program but it not work.
I've been try to search in google because I think my code is wrong but its SAME !
here is my angularJS controller
$scope.getDataLoct = function(){
PanelEditor.getDataLoct().then(function(result) {
console.log('result loct',result);
var res = result.data;
console.log('resultdataloct', res);
$scope.tampil= res;
});
}
$scope.deleteVenues = function(dataD, idx){
var dataD = $scope.tampil[idx];
console.log('dataD',dataD);
PanelEditor.deleteVenue(dataD).then(function(result){
console.log('sukses');
$scope.tampil.splice(idx, 1);
});
}
here is my angularJS HTML
<div ng-model ="info">
<table class="ui celled padded table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Addres</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Action</th>
</tr>
</thead>
<tbody class="content" ng-repeat="tmp in tampil track by $index">
<tr>
<td class="collapsing">
<div class="ui ribbon label">{{$index +1}}</div>
</td>
<td >{{tmp.title}}</td>
<td >{{tmp.address}}</td>
<td >{{tmp.latitude}}</td>
<td >{{tmp.longitude}}</td>
<td><div class="ui small blue basic icon buttons right floated">
<button class="ui button" tooltips tooltip-content="Edit" tooltip-side="bottom" tooltip-speed="fast" tooltip-size="small" tooltip-hide-trigger="click mouseleave" ng-click="clickMenuVenue('loct','Edit Venue','',info)">
<i class="write icon"></i>
</button>
<button class="ui button" tooltips tooltip-content="delete" tooltip-side="bottom" tooltip-speed="fast" tooltip-size="small" tooltip-hide-trigger="click mouseleave" ng-click="deleteVenues($index)">
<i class="remove icon"></i>
</button>
</div></td>
</tr>
</tbody>
</table>
</div>
here is my angularJS service
getDataLoct: function() {
return $http.get('/venue/getAll/');
},
deleteVenue: function(dataD) {
console.log('service',dataD);
return $http.post('/venue/deleteVenue/',dataD);
}
here is my NodeJS Controller
deleteVanue: function (req, res) {
Vanue.destroy({id:req.param('id')}).exec(function (err){
return res.json(200);
});
},
getAll: function (req, res) {
Venue.find().sort({ id: 'asc' }).exec(function (err, found){
return res.json(200, found);
});
}
and when I clik Remove Button the Console printed this
dataD undifinded
SOMEONE CAN HELP??!!
if my question have mistake please help me to fix it

In your delete function:
$scope.deleteVenues = function(dataD, idx) {..}
you have TWO parameters in your controller.
But in the view you only call it with one parameter:
ng-click="deleteVenues($index)"
There are two options:
Either you pass the whole object which is to be deleted or you pass the $index.
Right now your app wants to read idx in the controller, but you are passing only one parameter. That's the reason why you get this error.

How to edit contents in Angular js Smart Table

I am quite new to java script, so I must apologise if this seems basic.
How can I edit rows tables in Smart-Table with Angularjs? There doesn't seem to be a tutorial with the new Smart-Table. I would like to create a simple form for users to enter the hours open for a particular place.
I have created buttons which can add and remove rows on the table, but when I add in contenteditable="true" none of the changes are persisted when I update the object. I understand that the contenteditable is a specific html5 parameters independent of smart-table, but I don't understand how else I can update the data or how I could retrieve the updated data.
The data is retrieved from the angularjs controller via the mean.js routes.
<div class="controls">
<table st-table="place.openHours" class="table table-striped">
<thead>
<tr>
<th>Day</th>
<th>Opening Time</th>
<th>Closing Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in place.openHours" contenteditable="true" >
<td>{{row.day}}</td>
<td>{{row.open}}</td>
<td>{{row.close}}</td>
<button type="button" ng-click="removeOpenHour(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</tr>
</tbody>
</table>
<button type="button" ng-click="addOpenHour(row)" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Add new Row
</button>
</div>
Inside the javascript:
$scope.removeOpenHour = function removeOpenHour(row) {
var index = $scope.place.openHours.indexOf(row);
if (index !== -1) {
$scope.rowCollection.splice(index, 1);
}
}
$scope.addOpenHour = function addOpenHour() {
$scope.place.openHours.push(
{
day: 'Monday',
open: 540,
close: 1080
});
};

Thanks I had a look around and used the code from here http://jsfiddle.net/bonamico/cAHz7/ and merged it with my code.
HTML file:
<tr ng-repeat="row in place.openHours">
<td><div contentEditable="true" ng-model="row.day">{{row.day}}</div></td>
<td><div contentEditable="true" ng-model="row.open">{{row.open}}</div></td>
<td><div contentEditable="true" ng-model="row.close">{{row.close}}</div></td>
<td>
<button type="button" ng-click="removeOpenHour(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</td>
JS file:
myApp.directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
// view -> model
elm.bind('blur', function() {
scope.$apply(function() {
ctrl.$setViewValue(elm.html());
});
});
// model -> view
ctrl.render = function(value) {
elm.html(value);
};
elm.bind('keydown', function(event) {
console.log("keydown " + event.which);
var esc = event.which == 27,
el = event.target;
if (esc) {
console.log("esc");
ctrl.$setViewValue(elm.html());
el.blur();
event.preventDefault();
}
});
}
};
});

My solution is it:
Angular directive :
app.directive("markdown", function() {
return {
restrict: 'EA',
scope: {
value: '='},
template: '<span ng-click="edit()" ng-bind="value"></span><input ng-blur="blur()" ng-model="value"></input>',
link: function($scope, element, attrs) {
// Let's get a reference to the input element, as we'll want to reference it.
var inputElement = angular.element(element.children()[1]);
// This directive should have a set class so we can style it.
element.addClass('edit-in-place');
// Initially, we're not editing.
$scope.editing = false;
// ng-click handler to activate edit-in-place
$scope.edit = function() {
$scope.editing = true;
// We control display through a class on the directive itself. See the CSS.
element.addClass('active');
// And we must focus the element.
// `angular.element()` provides a chainable array, like jQuery so to access a native DOM function,
// we have to reference the first element in the array.
inputElement[0].focus();
};
// When we leave the input, we're done editing.
$scope.blur = function() {
$scope.editing = false;
element.removeClass('active');
}
}
};
});
HTML:
<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="sku">SKU</th>
<th st-sort="skuSupplier">SKU proveedor</th>
<th st-sort="name">Descripción</th>
<th st-sort="cantidad">Cantidad</th>
<th st-sort="precio">Precio unitario</th>
<th st-sort="total">Total</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="Buscar producto ..." type="text"/></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td><markdown value="row.sku"></markdown></td>
<td><markdown value="row.skuSupplier"></markdown></td>
<td><markdown value="row.name"></markdown></td>
<td><markdown value="row.cantidad"></markdown></td>
<td><markdown value="row.precio"></markdown></td>
<td><markdown value="row.total"></markdown></td>
<td>
<button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle"></i>
</button>
</td>
</tr>
</tbody>
</table>