I have two arrays of variable lenghts containing html which need to be displayed side by side in a table by index. So arrayA[0] should be in the same row as arrayB[0], and so on.
I figured I could do this with two ng-repeat-start directives, e.g.:
<table>
<tbody ng-repeat-start="arrayA">
<tr ng-repeat-start="arrayB">
<td bind-html="arrayA.Details"></td>
<td bind-html="arrayB.Details"></td>
<tr ng-repeat-end></tr>
<tbody ng-repeat-end></tbody>
</table>
However this does not seem to work. Any ideas?
Thanks
Related
Suppose I have an array of objects. I need to create dynamically a table using ng-repeat. The thing is, I don't want to hardcode every property of the object to the html. I created an array which contain the relevant keys to the current object (the input can sometimes be different). How can I create ng-repeat which will run over each object of the data array and printing each property of the keys array I created earlier?
xlsxTableProps is an array with strings which are keys of every object inside parsedXslxData array of objects.
This is how I create the keys for the input (which again, can be different each time)
JS:
Object.keys(this.parsedXslxData[0]).forEach(key => {
this.xlsxTableProps.push(key)
});
HTML:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" ng-repeat="header in $ctrl.xlsxTableProps">{{header}}</th>
</tr>
</thead>
<tr ng-repeat="item in $ctrl.parsedXslxData">
<td>{{$index}}</td>
<td ng-repeat="tableItem in $ctrl.xlsxTableProps"></td>
<td>{{item[{{tableItem}}]}}</td>
</tr>
</table>
Problem is with your syntax here {{item[{{tableItem}}]}}, no need to use extra pair of brackets. Simply use {{item[tableItem]}}.
In the code below, mydt data is coming from a json and chkdur data is coming from a different array. I want to print the mydt and chkdur values simultaneously...
My Code
<tr ng-repeat="sdetail in mydt">
<td>{{sdetail.pmsg}}</td>
<td>{{sdetail.displaytime}}</td>
<td ng-repeat="st in chkdur">{{st}}</td>
</tr>
You should use $index to print respective json data from second array
<tr ng-repeat="sdetail in mydt">
<td>{{sdetail.pmsg}}</td>
<td>{{sdetail.displaytime}}</td>
<td>{{chkdur[$index]}}</td>
</tr>
Try This
<tr ng-repeat="(pIndex, sdetail) in mydt">
<td>{{sdetail.pmsg}}</td>
<td>{{sdetail.displaytime}}</td>
<td >{{chkdur[pIndex]}}</td>
</tr>
Maybe I am completely confused how td works as I haven't used tables in my code for yeeaars (strong div believer), or maybe I am confused on how ng-if is attempting to separate my data.
Either way, I am not getting my expected results, but there is otherwise nothing wrong with the code, I think my logic is just off.
Here is a working Plunker http://plnkr.co/edit/LoMEMBYc6kUodb9tcbfM?p=preview
<table>
<tr ng-repeat="z in waiverModalLinks">
<td ng-if="z.id=='color'" class="{{z.id}}">{{z.title}}</td>
<td ng-if="z.id==''" class="{{z.id}}">{{z.title}}</td>
</tr>
</table>
The ultimate end result is to have every other td a different color, however I realize that the current logic is going to put the colored td on the left and the non-colored td on the right. But that was the object I was working with before I realized I needed two separate columns, finding the need for a table in the first place.
But anyway, what is not working then is that.. well they are still stacked. I would expect to see the colored td on the left-hand side of the table and the non-colored td on the right-hand side of the table.
Where's the err in my logic?
Your data model seems to be the source of the confusion. You have a simple array, so each td will be in the same row. If you create a 2d array, you can make a new row for each inner array:
$scope.waiverModalLinks =[
[
{title:"1", link:"", id:"color"},
{title:"2", link:"", id:""}
],
[
{title:"3", link:"", id:"color"},
{title:"4", link:"", id:""}
]
];
And a simpler repeater:
<tr ng-repeat="row in waiverModalLinks">
<td ng-repeat="z in row" class="{{z.id}}">
{{z.title}}
</td>
</tr>
Plunkr: http://plnkr.co/edit/VeXBJcf3naI5bRttQ1Pt?p=preview
z.id is either equal to 'color', or an empty string, but can't be both at the same time. So every row will have at most one cell:
if z.id is equal to color, the generated dom will be
<tr ng-repeat="z in waiverModalLinks">
<td class="{{z.id}}">{{z.title}}</td>
<!-- removed second td -->
</tr>
if z.id is equal to ''', the generated dom will be
<tr ng-repeat="z in waiverModalLinks">
<!-- removed first td -->
<td class="{{z.id}}">{{z.title}}</td>
</tr>
You need two cells in every row: one blank and one filled, or vice-versa:
<table>
<tr ng-repeat="z in waiverModalLinks">
<td ng-if="z.id==''"></td>
<td class="{{z.id}}">{{z.title}}</td>
<td ng-if="z.id=='color'"></td>
</tr>
</table>
I have a table that uses ng-repeat-start and ng-repeat-end every two table rows, like this:
<table>
<tr>... // other <tr>'s without ng-repeat
<tr ng-repeat-start="parameter in ctrl.parameters">
<td>Name</td>
<td>{{parameter.name}}</td>
</tr>
<tr ng-repeat-end>
<td>Value</td>
<td>{{parameter.value}}</td>
</tr>
</table>
This AngularJS application is deployed in Karaf as a Hawtio plugin and ng-repeat-start-end part doesn't work. Maybe because it's a plugin. Other table rows (without ng-repeat) works and shows the data binded. The odd thing is, a single entry for the label Name and Value still appears, but without the expression evaluated, whether there is or no data bound to the two element rows. What's the reason behind this?
I'm considering to use a custom directive in the js module instead of placing ng-repeat-start and ng-repeat-end in the html. Could someone show how to do this the custom directive way?
Thanks.
I have solved my own question. Karaf's Hawtio uses AngularJS version 1.1.5 (as of this writing), which do not have ng-repeat-start and ng-repeat-end yet. So, what I did is to enclose the repeating two rows in another <tbody> (multiple <tbody>s is working in HTML5) and put ng-repeat directive there. Like this:
<tbody>
.
.
.
</tbody>
<tbody ng-repeat="entry in data.entries">
<tr>
<td>Name</td>
<td>{{entry.name}}</td>
</tr>
<tr>
<td>Value</td>
<td>{{entry.value}}</td>
</tr>
</tbody>
While replacing legacy javascript with angularjs code, I'm stuck with the following use case (simplified code as follows):
<tr ng-repeat="section in page.sections>
<td>{{section.name}}:</td>
</tr>
<tr ng-repeat="task in section.tasks>
<td>{{task.name}}:</td>
</tr>
The expected result should be a single table, with task rows should follow parent section row.
I understand that the inner loop won't work because of the scope of the section element is not the parent of the inner loop.
Is there a work around (or a best suitable way) to perform this?
The following should work:
<tr ng-repeat-start="section in page.sections">
<td>{{section.name}}:</td>
</tr>
<tr ng-repeat="task in section.tasks">
<td>{{task.name}}:</td>
</tr>
<tr ng-if="false" ng-repeat-end><td>end</td></tr>
See a demo plunkr