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.
Related
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
I am using dir-paginate library to paginate my data on the page. The issue I am having is when I am adding a new object to the list and viewing this on the page instantly. On the controller side every thing seems to work just alright.
Here is my controller
/**
* Array of all the items
*/
$scope.allItems = [];
$scope.postResource = function() {
ProjectsFactory.save($scope.newProject)
.success(function(data) {
$scope.allItems.push(data);
console.log($scope.allItems);
$scope.newProject = ''
ToastService.show('Added successfully!');
})
.error(function(data) {
sweetAlert("Oops...", "Something went wrong!", "error");
console.log(data);
});
}
Notice the log I am doing right there. On the console page I can see the new object is being added to the rest of the objects. I believe the issue is occurring on the view side which looks just like this.
<table class="table table-bordered table-hover table-condensed bg-white" st-table="rowCollectionBasic">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="item in allItems | filter: search.query | itemsPerPage : itemPerPage" total-items="totalProjects" current-page="currentPage">
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td style="width:150px">
<button class="btn btn-info btn-sm" ng-click="showEditDialog($event, item)">
<i class="glyphicon glyphicon-edit"></i>
</button>
<button class="btn btn-danger btn-sm" ng-click="deleteResource(item, $index)">
<i class="glyphicon glyphicon-trash"></i>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="20" class="text-center">
<dir-pagination-controls on-page-change="pageChanged(newPageNumber)" boundary-links="true"></dir-pagination-controls>
<md-progress-circular md-mode="indeterminate" ng-if="AjaxInProgress"></md-progress-circular>
</td>
</tr>
</tfoot>
To see the new created object on the page, I need to either refresh the page or click somewhere else and return to the same page again.
Someone has an idea what I am doing wrong?
Update #1
The project service has $http
// save a new resource
save: function(data) {
return $http({
url: $rootScope.baseUrl + 'projects',
method: 'POST',
data: data
});
},
Thanks!
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
I'm using Angular-Smart-table to generate a table full of events for a project.
Adding and removing columns is a requirement, and we have a separate UI component for doing so. This UI component is a modal, and it's a checkbox of the columns I want to include. When this modal closes however, my smart-table goes blank and doesn't update with new choices when I update the table column headers.
Here is the code in the controller that handles the tablesettings event.
function activate(){
vm.$on('tablesettings', function(event, args){
setTimeout(function(){
console.log(args);
vm.tableColumns = {};
angular.forEach(args.columns, function(v,k){
vm.tableColumns[v.value] = v.label;
});
vm.tableRows = [];
addTabletoScope(TableService.cache.data);
},30000)
});
}
function addTabletoScope(td){
vm.tableRows = [].concat(vm.tableData);
console.log(vm.tableColumns);
}
Here is the HTML for the table:
<div class="gTable" style="overflow-x:auto; height:100%;">
<table style="width: 100%" st-table="tableRows" st-safe-src="tableData" st-pipe="tableControl.getPages()" st-pagination-scroll class="table table-striped scroll">
<thead>
<tr>
<th ng-repeat="(key, val) in tableColumns">{{val}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in tableRows">
<td >{{row.eventDateString}}</td>
<td >{{row.cocom}}</td>
<td >{{row.country}}</td>
<td >{{row.province}}</td>
<td >{{row.district}}</td>
<td >{{row.iedType}}</td>
<td >{{row.incidentType}}</td>
<td>{{row.eventId}}</td>
<!-- <td ng-hide="cityremove">{{row.city}}</td>-->
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="text-center">
<div st-pagination="" st-items-by-page="pageNumbers" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
</div>
Here's where I broadcast the tablesettings event,
function handleWidgetSettingsReturn(response) {
switch (response.widgetType) {
case "chart": {
if (!angular.isUndefined(response.widgetSubType) &&
response.widgetSubType !== scope.item.settings.widgetSubType) {
scope.item.settings.widgetSubType = response.widgetSubType;
}
break;
}
case "table": {
if (!angular.isUndefined(response.widgetOptions)) {
$log.info("Table settings set");
scope.item.settings.widgetOptions = response.widgetOptions;
console.log(scope.item.settings.widgetOptions);
scope.$broadcast('tablesettings', scope.item.settings.widgetOptions);
}
}
}
}
This is where the modal instance is closed on ok.
function ok() {
var result = {
widgetType: $scope.widgetConfig.widgetType,
widgetSubType: ($scope.widgetConfig.getWidgetSubtype())? $scope.widgetConfig.getWidgetSubtype() : undefined,
widgetOptions: ($scope.widgetConfig.generateWidgetOptions())? $scope.widgetConfig.generateWidgetOptions() : undefined
};
$modalInstance.close(result);
It feels like my template doesn't come back and isn't refreshing or changing, even when I update the scope.tableColumns with the modal response. $scope.apply() also does not work for me, nor a refresh method.
I'm not sure why my smart-table goes blank when I hit ok for that modal.
I am trying to show a more detailed summary of a row when a user clicks on the "+" icon on the row. I got it to work when I used an tag but when I modified it to an tag, the javascript would not kick in.
Here's what I have:
<table class="table" ng-repeat="lineItem in order.OrderLineItems">
<tbody >
<tr >
<td class="col-md-3"><a ng-hide="!lineItem.OrderLineItemModifiers.length " class="glyphicon glyphicon-plus" ng-model=show></a> <b>Item</b></td>
<td class="col-md-3">{{lineItem.Name}}</td>
<td class="col-md-3">{{lineItem.Quantity}}</td>
<td class="col-md-3">{{lineItem.TotalPrice}}</td>
</tr>
<tr ng-repeat="modifiers in lineItem.OrderLineItemModifiers" ng-show="show">
<td class="col-md-3"></td>
<td class="col-md-3 ordermodifier">{{modifiers.Name}}</td>
<td class="col-md-3"></td>
<td class="col-md-3 ">{{modifiers.TotalPrice}}</td>
</tr>
</tbody>
</table>
<div><b>Total Amount: {{order.TotalAmount}}</b></div>
And in the Javascript file:
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, order) {
$scope.toggleDetail = function ($index) {
$scope.activePosition = $scope.activePosition == $index ? -1 : $index;
};
});
What I am confused about is why would this work if I used an tag instead of an ? With the current code above, I would click on the "+" and it would not expand the row to show the modifier rows
Thank you!
<td class="col-md-3"><a ng-hide="lineItem.OrderLineItemModifiers.length !== 0 " class="glyphicon glyphicon-plus" ng-model=show></a> <b>Item</b></td>
try this. not sure what problem you had.