I have a table where its second column consists of multiple subheaders. For each row in the table, its data under the second column can consist of multiple rows. I’m having trouble syncing those multiple rows under the subheaders.
http://jsfiddle.net/jkkvy86x/
<table>
<thead>
<tr>
<th>col 1</th>
<th colspan="3">col2</th>
</tr>
<tr>
<th></th>
<th>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>
<tr>
<td>row2</td>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</tbody>
</table>
For row1, I want data4, data5, data6 to also be under h1, h2, h3, respectively.
I'm doing this in AngularJS/Bootstrap so the data/formatting is important. I don't think adding another row with a blank data for its first column would work although I'm open to solutions.
This is not angular. BTW, can you use <br/>?
I was working on a plnkr: http://plnkr.co/edit/XNQPnHM1z58XB5usioZA?p=preview
But with the structure I can do a better suggestion.
Related
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
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]}}.
This is a json format from my database. How do i get a tabulated information of the names and phone numbers etc.
I will create a simple example with minimal table
<table>
<thead>
<tr>
<th>Car type</th>
<th>Email</th>
</tr>
</thead>
<tbody>
#foreach($posts as $post)
<tr>
<td>{{ $post->Cartype }}</td>
<td>{{ $post->email }}</td>
</tr>
#endforeach
</tbody>
</table>
If you want car types and banks as seperate entities, you have to declare the $banks and $carTypes as 2 arrays and get the necessary data for the arrays from the database.
After that you can then pass those arrays to the view. You can use the below code to pass multiple arrays to the view.
return view('yourview', compact('banks ','carTypes '));
After that in your view you can render your values using the foreach loop to get the values.
foreach($banks as $bank){
// Your code
}
foreach($carTypes as $carType){
// Your code
}
Hope this helps you :)
I'm new to Angular, as will probably become apparent!
I've created a view with a few tables of data to show users different statistics. A simple example would be:
<div class="table-container">
<table class="percs">
<thead>
<tr>
<td>Stat Name</td>
<td>Stat Value</td>
<td>Stat bar</td>
</tr>
</thead>
<tbody>
<tr>
<td>Stat 1</td>
<td>{{ statPercs.stat1 }}</td>
<td><uib-progressbar value="statPercs.stat1"></uib-progressbar></td>
</tr>
<tr>
<td>Stat 2</td>
<td>{{ statPercs.stat2 }}</td>
<td><uib-progressbar value="statPercs.stat2"></uib-progressbar></td>
</tr>
</tbody>
</table>
</div>
I'm using the progressbar just for a small visual representation of the data. However if my understanding so far is correct, although each row in the table only references one value it will incur 2 $$watchers by being referenced in 2 separate tags.
Is it possible to achieve this with just one binding per value (i.e. "statPercs.stat1", "statPercs.stat2", etc) but still be able to re-use that value in multiple columns of the table?
Or even better still, one binding for the object itself (i.e. "statPercs") and still be able to use the values contained in that object in multiple places in the table?
I am using Silenium IDE to test a website's table data. I have the Flow Control add-on, but I have a tricky loop to do.
I need to check each row of a table that its data contains certain text. The ID of each row has a different # identifying the given row. Without a loop I would do the following test:
assertTable id=ctl_MainPlaceLog.1.0 071-01
assertTable id=ctl_MainPlaceLog.2.0 071-01
assertTable id=ctl_MainPlaceLog.3.0 071-01
assertTable id=ctl_MainPlaceLog.4.0 071-01
etc...
As you can see, the row # of the IDs increase as you move down the table. Is there a way to run a loop which will check the same ID of the table but in each iteration will increase the row # WITHIN the ID? This way I can just run down the table in loop, each iteration only changing the # of the row WITHIN the same element ID.
Thank you.
Ilya
I think the following code will help you do your job
<tr>
<td>store</td>
<td>1</td>
<td>i</td>
</tr>
<tr>
<td>storeElementPresent</td>
<td>id=ctl_MainPlaceLog.${i}.0</td>
<td>present</td>
</tr>
<tr>
<td>while</td>
<td>${present}==true</td>
<td></td>
</tr>
<tr>
<td>assertText</td>
<td>ctl_MainPlaceLog.${i}.0</td>
<td>071-01</td>
</tr>
<tr>
<td>storeEval</td>
<td>${i}+1</td>
<td>i</td>
</tr>
<tr>
<td>storeElementPresent</td>
<td>id=ctl_MainPlaceLog.${i}.0</td>
<td>present</td>
</tr>
<tr>
<td>endWhile</td>
<td></td>
<td></td>
</tr>