Let me start by saying that I am definitely new to Angular, but I have done a bit of digging and haven't found anyone else trying to do this with quite the same restraints.
I am attempting to create a nested table with the outer table containing rows of information from a JSON object. Beneath each row in this outer table, I need to generate another table that contains information from a JSON object retrieved using information from the outer table row. The problem I have is making sure that the information in the inner table is different for each row within the outer table. Right now, I'm running into an issue where I get the information for each an outer row displayed in every inner row for a brief moment before my script cycles through to the next outer row and changes the information for every inner row until the script reaches the end of the outer rows.
I'm working from an online application, with no true database access, hence the need to grab the data needed for the table from a URL.
Here are my scripts:
var projectApp = angular.module('projectEditor', []);
var parents = [];
projectApp.controller('ProjectController', [ '$scope', '$http',
function($scope, $http, msSvc) {
$scope.isLoaded = false;
$scope.loading = true;
$scope.url = '/api/now/table/';
$http.defaults.headers.common.Accept = "application/json";
$scope.updatePrjList = function() {
$http({
method: 'GET',
url: $scope.url + "pm_project?sysparm_query=active=true^ORDERBYDESCend_date&sysparm_limit=5&sysparm_display_value=true"
}).
success( function(data, status) {
$scope.loading = false;
$scope.isLoaded = true;
$scope.projects = data.result;
//parents.length = $scope.projects.length;
for (var i=0; i< $scope.projects.length; i++) {
parents.push($scope.projects[i].sys_id);
//console.log($scope.projects[i]);
}
$scope.updateMSList(parents);
}).
error( function(data, status) {
$scope.projects = [{"number": "Error fetching projects list"}];
});
};
$scope.updateMSList = function(msURL) {
console.log("URL: " + msURL);
for (var i=0; i< msURL.length; i++) {
$http({
method: 'GET',
url: $scope.url + "pm_project_task?sysparm_query=active=true^ORDERBYDESCend_date^parent=" + msURL[i] + "&sysparm_limit=5&sysparm_display_value=true"
}).
success( function(data, status) {
$scope.loading = false;
$scope.isLoaded = true;
$scope.milestones = data.result;
var i;
var l = $scope.milestones.length;
for (i=0; i< l; i++) {
//console.log($scope.milestones[i]);
}
}).
error( function(data, status) {
$scope.milestones = [{"number": "Error fetching milestones list"}];
});
}
};
$scope.updatePrjList();
}] );
});
<div class="container col-md-12" ng-app="projectEditor">
<div class="row" ng-controller="ProjectController">
<div class="panel panel-default">
<table class="table table-striped">
<thead>
<tr>
<th class="normal-cell col-md-1">Project</th>
<th class="normal-cell col-md-1">#</th>
<th class="normal-cell col-md-1">Percent Complete</th>
<th class="normal-cell col-md-1">Project Manager</th>
<th class="normal-cell col-md-1">Requestor</th>
<th class="normal-cell col-md-1">Portal/Application</th>
<th class="normal-cell col-md-1">State</th>
<th class="normal-cell col-md-1">Project Health</th>
<th class="normal-cell col-md-1">Target Date</th>
<th class="normal-cell col-md-1">Committed Date</th>
<th class="normal-cell col-md-1">Planned Impl. Date</th>
</tr>
</thead>
<tbody ng-show="isLoaded">
<tr ng-repeat="proj in projects">
<td colspan="12">
<table>
<tr>
<td class="normal-cell col-md-1"><a class="project-link" href="pm_project.do?sys_id={{proj.sys_id}}" style="color: #91b4c5; font-weight: 600;">{{proj.number}}</a><div>{{proj.short_description}}</div></td>
<td class="normal-cell col-md-1">{{proj.u_ranking}}</td>
<td class="normal-cell col-md-1"><pct-complete value="proj.percent_complete"></pct-complete></td>
<td class="normal-cell col-md-1">Test PM</td>
<td class="normal-cell col-md-1">Test Requester</td>
<td class="normal-cell col-md-1">Test Portal</td>
<td class="normal-cell col-md-1">{{proj.state}}</td>
<td class="normal-cell col-md-1">{{proj.u_health}}</td>
<td class="normal-cell col-md-1">Test Target</td>
<td class="normal-cell col-md-1">Test Commit</td>
<td class="normal-cell col-md-1">{{proj.start_date}}</td>
</tr>
<tr>
<table class="table table-striped col-md-12">
<thead>
<tr>
<th class="col-md-6 text-center">Project Description</th>
<th class="col-md-3 text-center">Milestone Name</th>
<th class="col-md-1 text-center">Planned Finish</th>
<th class="col-md-1 text-center">Actual Finish</th>
<th class="col-md-1 text-center">Status</th>
</tr>
</thead>
<tr ng-repeat="ms in milestones">
<td class="col-md-6">{{proj.description}}</td>
<td class="col-md-3">{{ms.short_description}}</td>
<td class="col-md-1">{{ms.start_date}}</td>
<td class="col-md-1">{{ms.end_date}}</td>
<td class="col-md-1">{{ms.state}}</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Related
I am getting data from db and put it in a scope, then iterate on these data by ng-repeat in html.
what i am trying to do is to send the selected object when the user check on a checkbox to get another data based on an id for example . i tried to use ng-model and ng-change on the checkbox but it sends only true or false .
HTML
<div id="frame" class="widget-content" style="height:50vh; overflow:auto;">
<table style="font-size: 12px;display: inline-block;">
<thead>
<tr>
<th>Check</th>
<th>Group Code</th>
<th>Group Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in Groups | unique : 'Group_code'"
ng-click="showInEdit(g)"
ng-class="{selected:g === selectedRow}">
<td><input type="checkbox" ng-model="g"
ng-true-value="g" ng-change="Getrequest2(g)"/>
<td>{{g.Group_code}}</td>
<td>{{g.group_name_latin}}</td>**
</tr>
</tbody>
</table>
<table style="font-size: 12px; float: left;">
<thead>
<tr>
<th>Check</th>
<th>Item Code</th>
<th>Item Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in items | unique : 'Item_code'"
ng-click="showInEdit(i)"
ng-class="{selected:i === selectedRow}">
<td><input type="checkbox" />
<td>{{i.Item_code}}</td>
<td>{{i.ITEM_NAME_LATIN}}</td>
</tr>
</tbody>
</table>
</div>
angularjs
$scope.Getrequest1 = function (g) {
//console.log(g);
$scope.typecd = g.TypeCode;
$scope.ShowLoading('slow');
LOASrv.GetGroup("LOAApprovalSetup/GetGroup" +
"?typ=" + g.TypeCode +
'&hospid=' + $scope.hospitalid +
'&userky=' + $scope.userkey
).then(function (response) {
$scope.Groups = (response.data);
$scope.HideLoading('slow');
})
}
$scope.Getrequest2 = function (i) {
console.log(i);
$scope.ShowLoading('slow');
LOASrv.GetItem("LOAApprovalSetup/GetItem" +
"?typ=" + $scope.typecd +
'&hospid=' + $scope.hospitalid +
'&userky=' + $scope.userkey +
'&groupcd=' + i
).then(function (response) {
$scope.items = (response.data);
$scope.HideLoading('slow');
})
}
You’re assigning ‘g’ object to checkbox ng-model.
This changes the value of ‘g’ from object to boolean on checkbox select.
That’s why you’re getting true/false
Change ng-model=“g.someBooleanName” and try
I have a standard HTML table, but I cant seem to find anything in order to get a foothold and get started.
My table is this:
<div id="seriesDiv" style="margin-top: 0px;">
<table class="tableFile2" summary="Results">
<tbody><tr>
<th scope="col" width="7%">Filings</th>
<th scope="col" width="10%">Format</th>
<th scope="col">Description</th>
<th scope="col" width="10%">Filing Date</th>
<th scope="col" width="15%">File/Film Number</th>
</tr>
<tr>
<td nowrap="nowrap">4</td>
<td nowrap="nowrap"> Documents</td>
<td class="small">Statement of changes in beneficial ownership of securities<br>Acc-no: 0001209191-19-051031 Size: 9 KB </td>
<td>2019-09-27</td>
<td></td>
</tr>
<tr class="blueRow">
<td nowrap="nowrap">4</td>
<td nowrap="nowrap"> Documents</td>
<td class="small">Statement of changes in beneficial ownership of securities<br>Acc-no: 0001209191-19-050363 Size: 50 KB </td>
<td>2019-09-20</td>
<td></td>
</tr>
So standard stuff -- table, tbody, trs and tds
I have tried
var rows = $("#seriesDiv").find("table");
console.log("in front loop ", rows.length);
for (var i = 0; rows.length; i++) {
console.log("inside loop");
}
and I tried:
var rows = $(".tableFile2").find("tr");
```
Can someone please show me how to do this? I want to loop through TRs, and for each TR, I want to loop through TDs.
thank you
The code below will help you loop through each tr. Also, take note that if you look for only "tds" for each "tr", you will not find "th". Thus, you also have to look for "ths". Take note that the code below is just an example. Thus, no error check or data evaluation or anything like that.
const cheerio = require('cheerio');
var html = `
<div id="seriesDiv" style="margin-top: 0px;">
<table class="tableFile2" summary="Results">
<tbody><tr>
<th scope="col" width="7%">Filings</th>
<th scope="col" width="10%">Format</th>
<th scope="col">Description</th>
<th scope="col" width="10%">Filing Date</th>
<th scope="col" width="15%">File/Film Number</th>
</tr>
<tr>
<td nowrap="nowrap">4</td>
<td nowrap="nowrap"> Documents</td>
<td class="small">Statement of changes in beneficial ownership of securities<br>Acc-no: 0001209191-19-051031 Size: 9 KB </td>
<td>2019-09-27</td>
<td></td>
</tr>
<tr class="blueRow">
<td nowrap="nowrap">4</td>
<td nowrap="nowrap"> Documents</td>
<td class="small">Statement of changes in beneficial ownership of securities<br>Acc-no: 0001209191-19-050363 Size: 50 KB </td>
<td>2019-09-20</td>
<td></td>
</tr>
`;
const $ = cheerio.load(html);
var tables = $("#seriesDiv").find("table");
var trs = $(tables).find("tr");
for ( let i = 0; i < trs.length; i++ ){
let tds = $(trs[i]).find("td");
let ths = $(trs[i]).find("th");
for ( let j = 0; j < ths.length; j++ ){
console.log($(ths[j]).text());
}
for ( let j = 0; j < tds.length; j++ ){
console.log($(tds[j]).text());
}
}
I want to search do search functionality on multiple colums using bootstrap table by using javascript guide me. Here i am showing my javascript code used for search on first column. Guide me that how t use more columns using javascript.
$("#search").on("keyup",function(){
var value=$(this).val();
$("table tr").each(function(index){
if (index!==0){
$row = $(this);
var id= $row.find("td:first").text();
if (id.indexOf(value)!==0){
$row.hide();
}
else{
$row.show();
}
}
});
});
HTML
<input type="text" name="search" id="search" placeholder="Search">
<table data-toggle="table" data-sort-name="name" data-sort-order="asc" >
<thead>
<tr>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="address" data-sortable="true">Address</th>
<th data-field="birthdate" data-sortable="true">Birth Date</th>
<th>Gender</th>
<th data-field="hobby" data-sortable="true">Hobbies</th>
<th>Action</th>
</tr>
</thead>
Try this,
Without your full html table, I can only guess what it looks like and try to create something that would work
$("#search").on("keyup", function() {
var value = $(this).val().toLowerCase();
console.clear()
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
$row.find("td").each(function(i, td) {
var id = $(td).text().toLowerCase();
console.log(id + " | " + value + " | " + id.indexOf(value))
if (id.indexOf(value) !== -1) {
$row.show();
return false;
} else {
$row.hide();
}
})
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="search" id="search" placeholder="Search">
<table data-toggle="table" data-sort-name="name" data-sort-order="asc">
<thead>
<tr>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="address" data-sortable="true">Address</th>
<th data-field="birthdate" data-sortable="true">Birth Date</th>
<th>Gender</th>
<th data-field="hobby" data-sortable="true">Hobbies</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Street 123</td>
<td>03 may</td>
<td>Male</td>
<td>Code</td>
<td>None</td>
</tr>
<tr>
<td>Emma</td>
<td>Street 123</td>
<td>03 may</td>
<td>Female</td>
<td>Code</td>
<td>None</td>
</tr>
</tbody>
</table>
I'm quite new to AngularJS and I'm facing some problems showing objects from an array in my view.
I have the following javascript code:
// list initialization:
vm.latestInvoices = { invoices: []};
....
// adding function to viewmodel:
vm.getLatestInvoices = getLatestInvoices;
...
function getLatestInvoices() {
console.log("Test 1234");
var servicename = "GetLatestInvoicesRequest";
var params = {};
httpCall(servicename, params).then(function (data) {
vm.latestInvoices = data;
console.log(data);
return vm.latestInvoices;
})["catch"](function (data) {
console.log("getLatestInvoices error");
});
}
My HTML view:
<div class="col-lg-12">
<p id="overview-headline">Invoices Overview</p>
<div class="scrollCustomers" ng-init="vm.getLatestInvoices()">
<table class="table table-hover">
<thead>
<tr>
<th>Client</th>
<th>Project</th>
<th>ID</th>
<th>Inv. Date</th>
<th>Start Date</th>
<th>End Date</th>
<th>DKK ex VAT</th>
<th>CIG</th>
<th>Attention</th>
<th>Cust. Manager</th>
<th>Regarding</th>
<th>Due Date</th>
<th>Finalized</th>
<th>Paid</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="invoice in invoices">
<td>{{invoice.CompanyName}}</td>
<td>Project Name</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Default</td>
<td></td>
<td></td>
<td></td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
In the Google Dev console, the array and it's objects are returned fine. The view doesnt return the default values, Project Name, Default and N/A, so my guess is that for some reason, invoices in ng-repeat is never called?
Thanks in advance!
Attach the result to the $scope:
httpCall(servicename, params).then(function (data) {
vm.latestInvoices = data;
console.log(data);
$scope.invoices = data;
})["catch"](function (data) {
console.log("getLatestInvoices error");
});
}
<table style="font-size:12px;" class="table table-bordered accounts" id="example">
<thead>
<tr>
<th style="text-align:center;">Action</th>
<th>Plan Name</th>
<th>Sales Force</th>
<th>Natl. Acc</th>
<th>Segment</th>
<th>Example</th>
</tr>
</thead>
<tbody>
{{#{accounts}}
<tr>
<td style="text-align:center;"><i class="fa fa-cog fa-2x"></i></td>
<td>{{PlanName}}</td>
<td>{{PlanTypeName}}</td>
<td>{{ParentPlanName}}</td>
<td>{{SegmentName}}</td>
<td>
if ({{SegmentName}}=="S")
{
something
}
else
{
something
}
</td>
</tr>
{{/accounts}}
</tbody>
</table>
</script>
Load System:
var templateWithData= Mustache.to_html($('#Tmp-Plans').html(),{accounts: data});
$("#con-accounts").empty().html(templateWithData);
Html Code:
<div id="con-accounts">
</div>
In your load system you might wanna add something like
data.segmentNameCheck = function () {
return data.SegmentName == 'S'
}
var templateWithData= Mustache.to_html($('#Tmp-Plans').html(),{accounts: data});
in template do
{{#segmentNameCheck}} Something {{/segmentNameCheck}}
{{^segmentNameCheck}} Something Else {{/segmentNameCheck}}