Unable to pass data using Angular9 - angularjs

I have an array of data fetch from the back-end. The data should be like this
UI
Bind above data to a table using the following code
HomeComponent.html
<table class="table table-hover" id =jres>
<thead>
<th *ngFor="let col of columns">
{{col}}
</th>
</thead>
<tbody>
<tr *ngFor="let jre of jreArray">
<ng-container *ngFor="let col of index" >
<td *ngIf='col !=="location"'>{{jre[col]}}</td>
<td *ngIf='col ==="location"' ><input class="btn btn-default" type="submit" value="Download" (click) ="download()"></td>
</ng-container>
</tbody>
</table>
HomeComponent.ts
export class HomeComponent implements OnInit {
constructor(private rs:RestService,private service:JreServiceService) {
}
columns= ["ID","JRE Name","Base Package","Download"];
index=["id","jrename","basepackage","location"]
jreArray: Array<IJre> = [];
searchkey: any;
path:any;
ngOnInit(): void {
this.service.getAllJre().subscribe(data=>{
this.jreArray = data;
console.log(data)
});
}
download(){
alert(this.path)
this.service.download(this.path).subscribe(data=>{
this.jreArray = data;
})
}
}
my requirement to pass the location value to the component.ts when i click Download button.I have tried below logics
1.ngModel
2.Pass value directly to the method using below code
<td *ngIf='col
==="location"' ><input class="btn btn-default" type="submit" value="Download" (click) ="download(jre[col])"></td>
Is there any simple way to solve this issue.
Please give an advice on this.

i have made below changes.now i can able to pass location.
<tbody>
<tr *ngFor="let jre of jreArray">
<td >{{jre.id}}</td>
<td >{{jre.jrename}}</td>
<td >{{jre.basepackage}}</td>
<td ><input class="btn btn-default" type="submit" value="Download" (click) ="download(jre.location)"></td>
</tbody>

Related

How do I get all results where at least one property contains the parameter passed in the filter? (angullarjs)

I am trying to convert my paginated table from individual columns to a search all columns that contain the result.
//Newly added input that I want to query all columns
<input type="text" ng-model="searchCriteria" />
<table ng-table="tableParams" class="table table-condensed" show-filter="true">
<tr ng-repeat="memberInfo in $data">
<td data-title="'Name'" filter="{ Name: 'text'}" sortable="'Name'">
{{memberInfo.Name}}
</td>
<td data-title="'Location'" filter="{ Location: 'text'}" sortable="'Location'" style="width: 275px;">
{{memberInfo.Location}}, {{memberInfo.country}}
</td>
<td data-title="'Phone'" >
{{memberInfo.Phone}}
</td>
<td data-title="''" style="width: 30px;">
<button type="button" class="btn btn-xs btn-info" title="View on map" ng-click="goToMarker(memberInfo.Key)">Map</button>
</td>
</tr>
</table>
Above you can see I have each column has it's own filter, but I want to remove them and have a single catch all.
I have added a screen shot below of a visual mockup
Thank you.
UPDATE
I got the filters to work, but not with the pagination...
<input type="text" class="form-control" placeholder="Search name, phone, or location" ng-model="queryFilter" />
<table ng-table="tableParams" class="table table-condensed" show-filter="true">
<tr ng-repeat="memberInfo in $data | filter:query">
<td data-title="'Name'" sortable="'Name'">
{{memberInfo.Name}}
</td>
<td data-title="'Location'" sortable="'Location'" style="width: 275px;">
{{memberInfo.Location}}, {{memberInfo.country}}
</td>
<td data-title="'Phone'" >
{{memberInfo.Phone}}
</td>
<td data-title="''" style="width: 30px;">
<button type="button" class="btn btn-xs btn-info" title="View on map" ng-click="goToMarker(memberInfo.Key)">Map</button>
</td>
</tr>
</table>
And in the controller I have added this method
$scope.query = function (memberInfo) {
return memberInfo.Name.toLowerCase().indexOf($scope.queryFilter.toLowerCase()) !== -1
|| memberInfo.Location.toLowerCase().indexOf($scope.queryFilter.toLowerCase()) !== -1
|| memberInfo.Phone.toLowerCase().indexOf($scope.queryFilter.toLowerCase()) !== -1
|| memberInfo.Country.toLowerCase().indexOf($scope.queryFilter.toLowerCase()) !== -1
;
};

Angular nested Data Tables with dynamic headers issue

I am using Angular DataTables in my application and trying to create nested datatables with dynamic headers.
Here is my Html code.
<table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance2" id="dtInvoicingData2" dt-options="dtOptions2" dt-column-defs="dtColumnDefs2">
<thead>
<tr>
<th ng-repeat="col in dtColumnDefs2">{{col.aTargets[0].sTitle | translate}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
<td ng-repeat="col in headerList2" ng-switch="col">
<span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
<span ng-switch-default>{{ client[col] }}</span>
</td>
</tr>
<tr ng-show="showViewDetail">
<div class="span12 pull-right" ng-show="showViewDetail">
<table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3" dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
<thead>
<tr>
<th ng-repeat="col3 in dtColumnDefs3">{{col3.aTargets[0].sTitle | translate}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
<td ng-repeat="col3 in headerList3" ng-switch="col">
<span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
<span ng-switch-default>{{ client[col3] }}</span>
</td>
</tr>
</tbody>
</table>
</div>
</tr>
</tbody>
</table>
Here is javascript Code
function makeDetailTable(data) {
var header = data[0],
dtColumns = [];
$scope.headerList2 = [];
var i = 0;
var key = "";
//create columns based on first row in Parent Datatable
for (var key in header) {
dtColumns.push(DTColumnDefBuilder.newColumnDef(i).withTitle(key));
$scope.headerList2.push(key);
i = i + 1;
}
$scope.dtColumnDefs2 = dtColumns;
$scope.dtOptions2 = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withButtons([
'excel',
{
text: 'Reset',
action: function (e, dt, node, config) {
$("#dtInvoicingData2").DataTable().search("").draw();
}
}
]);
}
$scope.btnViewDetails_Click = function (rowIndex) {
var detailList = $scope.lstInvoiceDetail[rowIndex]['lstDetail'];
var header3 = detailList[0],
dtColumns3 = [];
$scope.headerList3 = [];
var i = 0;
var key = "";
//create columns based on first row in child datatable
for (var key in header3) {
dtColumns3.push(DTColumnDefBuilder.newColumnDef(i).withTitle(key));
$scope.headerList3.push(key);
i = i + 1;
}
$scope.dtColumnDefs3 = dtColumns3;
$scope.dtInstance2 = null;
$scope.dtOptions3 = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withButtons([
'excel',
{
text: 'Reset',
action: function (e, dt, node, config) {
$("#dtInvoicingData3").DataTable().search("").draw();
}
}
]);
$scope.showViewDetail = true;
when I try to add child datatable it doesn't work and show console error
TypeError: Cannot set property '_DT_CellIndex' of undefined
I did search on this error but i have not find proper solution
Here is a little info related to this error
it says the problem is
Basically this issue came out because of miss matching count of th to td. be sure for number of th matches to td. hope this will help you.
Update:
Now i have trying this.
<table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance2" id="dtInvoicingData2" dt-options="dtOptions2" dt-column-defs="dtColumnDefs2">
<thead>
<tr>
<th ng-repeat="col in dtColumnDefs2">{{col.aTargets[0].sTitle | translate}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
<td ng-repeat="col in headerList2" ng-switch="col">
<span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
<span ng-switch-default>{{ client[col] }}</span>
</td>
</tr>
<tr>
<td colspan="3">
<table class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3" dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
<thead>
<tr>
<th ng-repeat="col3 in headerList3">{{col3 | translate}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(index,client) in lstChildInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
<td ng-repeat="col3 in headerList3" ng-switch="col">
<!-- <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span> -->
<span ng-switch-default>{{ client[col3] }}</span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="display:none;"> </td>
<td style="display:none;"></td>
</tr>
</tbody>
</table>
Child Table is created on first row, i want to created on each row.
Do you have any idea about it?
Because you are trying to create two rows with different structures instead of nested tables.
Row 1 :
<tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
<td ng-repeat="col in headerList2" ng-switch="col">
<span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
<span ng-switch-default>{{ client[col] }}</span>
</td>
</tr>
And Row 2 :
<tr ng-show="showViewDetail">
<div class="span12 pull-right" ng-show="showViewDetail">
<table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3" dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
<thead>
<tr>
<th ng-repeat="col3 in dtColumnDefs3">{{col3.aTargets[0].sTitle | translate}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
<td ng-repeat="col3 in headerList3" ng-switch="col">
<span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
<span ng-switch-default>{{ client[col3] }}</span>
</td>
</tr>
</tbody>
</table>
</div>
</tr>
and as far error states, data in both rows has different count for header and columns. It means your lists dtColumnDefs2, headerList2, dtColumnDefs3, and headerList3 have different counts.

display array of json objects using handlebar in nodejs & express

I'm new to node and trying to retrieve data from mongodb and display it to the client.I'm using handlebars for this purpose.I'm retrieving data from mongo collection it's an array of json objects but not successfully display it in html.
Here is my code snippets :
Retrieving from mongodb:
usrRouter.route('/profile/projects')
.get(function(req,res){
project.find({pusername:userN},function (err,projects) {
if(err){console.log(err); }
else{
res.render('projects',{"project":projects})
}
});
});
It's Results:
Take a look on screenshoot
Html Code:
<table class="table table-striped">
<thead>
<tr>
<th>Project Name</th>
<th>Project Type</th>
<th>Project Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{#each project}}
<tr>
<td> {{projectName}} </td>
<td> {{projectType}} </td>
<td> {{projectDesc}} </td>
<td> <button class="btn btn-primary">Delete</button>
<span> <button class="btn btn-primary"> <i class="icon-download-alt"></i> Download</button>
</span> </td>
</tr>
{{/each}}
</tbody>
</table>

Why I get gap in table rows?

I work on my angularjs project.
I use ng-repeat to create rows in table.
Here is plunker.
Here is html template:
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="object in arr1 track by object.id">
<td class="pull-left" ng-bind="object.name"></td>
<td ng-class="{'wrapper':showReview != $index }">
<div ng-class="{'slide':showReview != $index}">
<a class=" btn btn-default btn-xs" ng-click="showReview = showReview == $index ? -1 : $index;"><i class="glyphicon glyphicon-camera"></i></a>
<a class=" btn btn-default btn-xs" ng-click="showInspections = !showInspections; showReview = showReview == $index ? -1 : $index;"><i class=" glyphicon glyphicon-list-alt"></i></a>
</div>
</td>
</tr>
<tr ng-repeat-end ng-if="showInspections && showReview == $index">
<td colspan="">
{{t}}-{{$index}}
</td>
</tr>
</tbody>
</table>
Here is controller:
app.controller('MainCtrl', function($scope) {
$scope.arr1 = [{id:'124',name:'qqq'},
{id:'589',name:'www'},
{id:'45',name:'eee'},
{id:'567',name:'rrr'}];
$scope.t=100;
});
Here how it looks in the view:
You can see in picture above I have gap between the rows and I cant figure out why I get this gap?
You have one th in head and one td in second row you need to add colspan="2" on both of them.
Also do not use class="pull-left" with td take another element inside td and make it pull-left

How to remove entire row from table onclick of button?

I have two button in each row of a table. Onclick of any of the button the entire row should be removed from the table and also I'm sending some value to spring controller. It should be updated in database and also the entire row should be removed. I'm using angularjs,spring-mvc and mongodb.
// .html file
<table class="table table-bordered">
<thead>
<tr>
<th style="text-align: center;">Task name</th>
<th style="text-align: center;">Owner name</th>
<th style="text-align: center;">Authorize</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in taskDetails">
<td style="text-align: center;">{{task.name}}</td>
<!-- <td style="text-align: center;">{{task.owners}}</td> -->
<td style="text-align: center;">
<span ng-repeat="owner in task.owners">{{owner.ownerName.name}}{{$last ? '' : ', '}}</span>
</td>
<td style="text-align:center;">
<!-- <button class="btn btn-mini btn-primary" ng-click="approveTask(taskDetails.indexOf({{task.id}}), task)" value="approveTask">Approve</button>
<button class="btn btn-mini btn-danger" ng-click="rejectTask(taskDetails.indexOf({{task.id}}), task)" value="approveTask">Reject</button>
-->
<button class="btn btn-mini btn-primary" ng-click="approveTask(task)" value="approveTask">Approve</button>
<button class="btn btn-mini btn-danger" ng-click="rejectTask(task)" value="rejectTask">Reject</button>
</td>
</tr>
</tbody>
</table>
//controller.js
$scope.approveTask = function(task) {
$http.put("/task/approve/"+ task.id).success(function(data) {
alert("Approved! "+ data);
});
}
$scope.rejectTask = function(task) {
$http.put("/task/reject/"+ task.id).success(function(data) {
alert("Rejected! "+ data);
});
}
Well you're using ng-repeat for your rows, iterating over taskDetails so you can just remove that one entry from within the array like so
$scope.rejectTask = function (index, task) {
$scope.taskDetails.splice(index, 1);
}
In your HTML :
<button class="btn btn-mini btn-danger" ng-click="rejectTask($index)" value="rejectTask">Reject</button>
// We just need to pass the index for accessing the relevant object.
In your Javascript :
$scope.rejectTask = function($index) {
$scope.currentIndex = $index;
// You may want to show some screen loader to prevent user intervention during the ajax call.
$http.put("/task/reject/"+ task.id).success(function(data) {
// AS the ajax call is complete, it is now safe to splice the array.
$scope.taskDetails.splice($scope.currentIndex, 1);
$scope.currentIndex = -1;
//Remove the loader here
});
}

Resources