I have multiple source of income that I want displayed into a table. I will be importing more than 2 values and I want to be able to put them side by side for easy comparing. However, the code below is definitely not working.
https://plnkr.co/edit/Vkcc9YUnEIc3PuuS8Yv3?p=preview
<table>
<tr>
<td ng-repeat="type in informationNames">{{type}}>
</td>
<td ng-repeat="type in informationValues1">{{type}}>
</td>
<td ng-repeat="type in informationNameValues2">{{type}}>
</td>
</tr>
</table>
I found this but this doesn't really apply since it is only 1 array and I'll be importing 2+.
Angular ng-repeat in table
you could place each repeat into a different row so your code would look like:
<table>
<tr>
<td ng-repeat="type in informationNames">{{type}}
</td>
</tr>
<tr>
<td ng-repeat="type in informationValues1">{{type}}
</td>
</tr>
<tr>
<td ng-repeat="type in informationNameValues2">{{type}}
</td>
</tr>
</table>
this way they are all listed veritally
if you want them horizontally and you know all of the list are the same length you can do it like this:
`
<table>
<tr ng-repeat="name in informationNames">
<td>{{name}}
</td>
<td>
{{informationValues1[$index]}}
</td>
<td>
{{informationNameValues2[$index]}}
</td>
</tr>
</table>
Related
I want to select all first td values using JQuery.
Here is my code:
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
I want to get only 2 td (Status.Worksheet ID) elements from my above code using JQuery
You can pass any valid CSS selector to JQuery, so all you need is:
$("td:first-child");
// This will find and group together all the `<td>` elements that are the first ones
// within their parent (<tr>).
var $results = $("td:first-child");
// You can loop over the set and work with the individual DOM elements...
$results.each(function(index, result){
// result is the DOM element we're looping over
console.log(result.textContent);
});
// Or, you can access a specific element by index:
console.log($results[0].textContent + ", " + $results[1].textContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;"><table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
I'm trying to use 2 different objects for ng-repeat-start and ng-repeat-end.
for example:
<tr ng-repeat-start="file in files">
<td class="name-col">{{file.name}}<br>
</td>
<td class="name-col">{{file.progress}}</td>
</tr>
<tr ng-repeat-end="otherFile in otherFiles">
<td colspan="2">
{{otherFile.errors}}
</td>
</tr>
Doesn't seem to work right now and it only assumes the first object (files)
Maybe this would do:
<tr ng-repeat-start="file in files">
<td class="name-col">{{file.name}}<br>
</td>
<td class="name-col">{{file.progress}}</td>
</tr>
<tr ng-repeat-end>
<td colspan="2">
{{otherFiles[ $index ].errors}}
</td>
</tr>
Your problem is that ng-repeat-end does not accept an argument.
If you want to ng-repeat over a different object like you have above, you would need to start a new ng-repeat block.
Edit: Added wrapping html to show a point. You might want to change things around a bit.
<div ng-repeat="file in files track by $index">
<tr>
<td class="name-col">{{file.name}}<br>
</td>
<td class="name-col">{{file.progress}}</td>
</tr>
<tr>
<td colspan="2">
{{otherFile[$index].errors}}
</td>
</tr>
</div>
I've been digging around to try and get a list of comma separated values from a set of checkboxes. There have been lots of useful answers here, but I can't work out a final kink. My code is behaving oddly depending on whether or not the first checkbox is checked and I can't work out why (this is my first ever attempt at javascript!)
<script type="text/javascript">
function updateTextArea() {
var allVals = $('input.gift:checked').map(
function() {return this.value;}).get().join();
$('#txtValue').val(allVals)
}
$(function () {
$('#gift input').click(updateTextArea);
updateTextArea();
});
</script>
And here's the html that accompanies it.
<fieldset id="gift">
<input type='checkbox' name='lFreeProductid' value='8840'
id="lFreeProductid1" class="gift">
</td>
<td class="style42">64 SSG</td>
<td class="style32"> </td>
</tr>
<tr id="tr2">
<td class="style33"><input type='checkbox' name='lFreeProductid'
value='420' id="lFreeProductid1" class="gift"></td>
<td class="style41">Perfect D</td>
<td> </td>
</tr>
<tr id="tr3">
<td class="style33"><input type='checkbox' name='lFreeProductid'
value='460' id="lFreeProductid1" class="gift"></td>
<td class="style41">Soccer Attack</td>
<td> </td>
</tr>
</fieldset>
<tr>
<td class="style33"> </td>
<td class="style41"> </td>
<td> </td>
</tr>
</table>
<textarea id="txtValue"></textarea>
I know this is the sort of question that's been asked a thousand times, but I can't seem to find a solution to this specific issue. Any help would be greatly appreciated.
I think your code is working fine !
Check this demo once : https://jsbin.com/vigixi/46/edit?html,js,output
And if this is not the desired output you want. Then let us know what exactly you want.
I advice you to correct all the HTML syntax errors
<fieldset id="gift">
<table>
<tr id="tr1">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='8840' id="lFreeProductid1" class="gift"></td>
<td class="style42"><label for="lFreeProductid1">64 SSG</label></td>
<td class="style32"> </td>
</tr>
<tr id="tr2">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='420' id="lFreeProductid2" class="gift"></td>
<td class="style41"><label for="lFreeProductid2">Perfect D</label></td>
<td> </td>
</tr>
<tr id="tr3">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='460' id="lFreeProductid3" class="gift"></td>
<td class="style41"><label for="lFreeProductid3">Soccer Attack</label></td>
<td> </td>
</tr>
<tr>
<td class="style33"> </td>
<td class="style41"> </td>
<td> </td>
</tr>
</table>
</fieldset>
<textarea id="txtValue"></textarea>
Your issue could be due to a certain browser or/and doctype
I want to get index of each row in this table using angularJS
<table>
<tbody>
<tr ng-repeat = "cust in costomers">
<td> cust.name </td>
<td> cust.phone </td>
<td> cust.address </td>
</tr>
</tbody>
I want to have a variable that contains the index of each row not to just display it
you can use $index
<tr ng-repeat = "cust in costomers">
<td> {{$index}} </td>
</tr>
I think you should be using the <tr> tag to place your ng-repeat directive.
You can use ng-repeat's $index property. See ng-repeat's documentation.
<table>
<tbody>
<tr ng-repeat = "cust in costomers">
<td> {{$index}} </td>
<td> {{cust.name}} </td>
<td> {{cust.phone}} </td>
<td> {{cust.address}} </td>
</tr>
</tbody>
</table>
$index works fine when the ng-repeat is not filtered. If you use a filter, it might be better to use indexOf(). Example:
<input type="text" ng-model="filterCustomers" placeholder="search...">
<table>
<tbody>
<tr ng-repeat = "cust in costomers | filter:filterCustomers">
<td> {{costomers.indexOf(cust) + 1}} </td>
</tr>
</tbody>
</table>
If you want to use your own variable as index you can use this:
<table>
<tbody>
<tr ng-repeat = "(index, cust) in costomers">
<td> {{index}} </td>
<td> cust.name </td>
<td> cust.phone </td>
<td> cust.address </td>
</tr>
</tbody>
I am using CKEditor 4.3.3, Where i have added table .Now table structure looks like given below
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Now i am able to select table using javascript as
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent();
Now i want to add html text before <tbody> start and after <table> start .
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().appendHtml("<!-- <div>" +html+"</div> -->");
I am using this to append HTML. But for prepending HTML i am not able to find any API
Is there any alternatives?
I want output to be like this
<table>
<!-- <div>testing</div> -->
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody></table>
you can use any jquery functions by
var html=CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().getParent();
$(html.$).prepend("hi");
You can use this
var editor = CKEDITOR.instances.ficeditor;
var data = $("<div>"+editor.getData()+"</div>");
data.prepend("top line");
editor.setData(data.html());