Develop Reference

Popover on hover, fill out from Mysql Database

In my web, when hovering over a row, I show a popup table with data.
What I want to be able to do is to get these data from the database.
Currently it looks like this :
<td id="popupContent" data-trigger='hover' data-container="body"
data-toggle="popover"
data-content="
<div class='table-responsive'>
<table class='sastable table-striped table-bordered' data-toggle='table' data-height='150' data-classes='table table-striped table-bordered'>
<thead id='head'>
<tr>
<th class='col-md-6'>Value</th>
<th class='col-md-6'>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td class='col-md-6'>0</td>
<td class='col-md-6'>1</td>
</tr>
<tr>
<td class='col-md-6'>10</td>
<td class='col-md-6'>2</td>
</tr>
<tr>
<td class='col-md-6'>20</td>
<td class='col-md-6'>3</td>
</tr>
</tbody>
</table>
</div>"
data-html="true"></td>
</tr>
And the js function :
$(function() {
$('#popupContent')
.popover({
container : 'body'
});
});
In my database I have a table like this :
Type Value Score
type1 0 1
type1 10 2
....
type2 0 1
based on the Id of the td I want to be able to call a certain type and all of the values and scores to put them on the popup table.
How do I achieve this ?
In a Spring Controller I have a RestController that returns a JSON file with the tables
#RequestMapping(path="/scores", method=RequestMethod.GET)
public List<Scores> getAllScores(){
return scoreService.getAllScores();
}
Maybe I could have a function like :
function getClientResults(type) {
// if type=="popupContent"
var url "/scores/"+type1 or something ?
$.getJSON(url, function(data) {
\\change table values ??
}
Am I on the right track ? or is there a better way to do this ? Any help would be appreciated ! Thank you

Way 1 You will be injecting a php into top of your page where You will connect to your database and do a query to get the data and write it into that popup table like <? echo $query['whatever']; ?>.
Way 2 You will create autonomus query page and when you hover the row it will send ajax request to that page receive data and will load it into the popup.

How to show/hide a UI component based on "|filter" results in AngularJS?

I have a nested table structure where a table populates based on a ng-repeat of a Javascript object "metasetHashSplit" and this table in turn has a table that gets populated based on a property within called "ids". I have a requirement where I need to hide the main ng-repeat if all the elements in the internal table is filtered out. I am using "pipe"/"|" filter for the internal tables.
I am unable to get handle on when or how to trigger the ng-show/hide based on if all the records in theinternal table is filtered out.
This is how the code is setup:
<tbody ng-repeat="(metaset, ids) in metasetHashSplit">
<tr class = "meta">
<td rowspan = 100 >{{metaset}}</td>
</tr>
<tr class = "meta" style="margin:0;padding:0;" ng-repeat="item in ids" >
<td class = "innerTable">
<table class="table child table-hover table-bordered table-condensed " >
<tr ng-repeat="buy in item.Buy | filter:{ MBC: by_buyMBC }" >
<td >{{buy.BuyId}}</td>
<td >{{buy.BuyRelease}}</span></td>
<td >{{buy.BuyComponentAffected}}</td>
<td >{{buy.BuyStatus}}</span></td>
</tr>
</table>
</td>
</tr>
Could somebody help me if they have found themselves in a position like this? Basically the tbody needs to show/hide with respect to the |filter:{MBC:by_buyMBC} results!

Based on this question use:
<div ng-repeat="buy in filtered = (item.Buy | filter:{ MBC: by_buyMBC })">
</div>
So all you would do to show and hide based off that is use ng-if="filtered.length > 0" on the right element

How do I use ng-repeat when the dynamic key value is an array

In my controller , i have the data like...
data = {
chartTypes":["pie","donut","bar","line"],
"features":{
"stacked": ["true","true","true","false"],
"percentage":["false","false","true","false"]
}
};
$scope.docStructure = data
Is there any way that i can user ng-repeat to iterate over the keys and again iterate if the value is an array?
<div ng-app="chartFeatures" ng-controller="chartFeaturesCtrl" style="height:200px; background:red;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th> </th>
<th ng-repeat="chartType in docStructure.chartTypes">{{chartType}}</th>
</tr>
<tr ng-repeat="(feature,supportedList) in docStructure.features">
<td>{{feature}}</td>
<td ng-repeat="supported in supportedList">{{supported}}</td>
</tr>
</table>
</div>
The ideas is I wanted to do a cross tab as below.
Example:

You just need to add track by $index to the ng-repeat on the td tag
<td ng-repeat="supported in supportedList track by $index">{{supported}}</td>
Here's a demo
You could also convert your "features" arrays to contain objects instead of primitives, and then you don't need the track by $index
Here's a demo of that.

Ng-repeat is not working as expected in html table?

Why doesn't this simple table structure work in angularjs? None of the rows gets populated with the data. If I replace span with tr, it works fine but my third column of Percent doesn't fit in well.
<table class="table table-hover">
<tbody>
<tr>
<th>Grade</th>
<th>Point</th>
<th>Percent</th>
</tr>
<tr>
<span ng-repeat="gdata in gradepoints">
<td ng-repeat="(grade, gp) in gdata"> {{grade | uppercase}} </td>
<td ng-repeat="(grade, gp) in gdata"> {{gp}} </td>
</span>
<span ng-repeat="pdata in percents">
<td ng-repeat="(grade, perc) in pdata"> {{perc}} </td>
</span>
</tr>
</tbody>
</table>

Try this:
<tr ng-repeat="gdata in gradepoints">
<td>{{gdata.grade | uppercase}}</td>
<td>{{gdata.gp}}</td>
<td>{{pdata[$index].perc</td>
</tr>
You want one row for each element in the gdata array, so the ng-repeat needs to be on the <tr> element. If the two arrays aren't in sync, you can create a function in your controller to return the pdata element you need:
$scope.findPdata(gdata, index) {
// ... do your magic here to find the pdata element you want
return result;
}
<td>{{findPdata(gdata, $index)}}</td>

guessing from the below:
<tr>
<th>Grade</th>
<th>Point</th>
<th>Percent</th>
</tr>
i guess your table has 3 columns so your each row has 3 columns?
in that case use the following
<tr ng-repeat="gdata in gradepoints">
<td>{{gdata.grade | uppercase}}</td>
<td>{{gdata.gp}}</td>
<td>{{gdata.percent}}</td>
</tr>
for above to work your gradepoints must be an ARRAY containing objects with 3 properties each i.e. grade,gp,percent

How to format table dynamically within ng-repeat in AngularJS

I have a list of items of different types and I would like to display them in a table.
The items of one type will have two columns and items of another type just one. Any suggestions how to change conditionally the colspan on the <> tag on fly?
<div ng-init="items = [
{name:'item1', old:1, new:2},
{name:'item2', old:2, new:2},
{name:'item3', msg: 'message'},
{name:'item4', old:0, new:2}
]">
<table border=1>
<tr ng-repeat="item in items" >
<th>{{item.name}}</th>
<td>{{item.old}}</td>
<td colspan='2'>{{item.msg}}</td>
<td>{{item.new}}</td>
</tr>
</table>
Here is the example to play in jsfiddle: http://jsfiddle.net/38LXt/1/
Thanks!

You can use conditional directives, such as ng-show, to do something like this:
<table border=1>
<tr ng-repeat="item in items" >
<th>{{item.name}}</th>
<td>{{item.old}}</td>
<td colspan="2" ng-show="item.type == 'typeA'">{{item.msg}}</td>
<td ng-show="item.type == 'typeB'">{{item.msgB1}}</td>
<td ng-show="item.type == 'typeB'">{{item.msgB2}}</td>
<td>{{item.new}}</td>
</tr>
</table>
More info about ng-show:
ngShow directive