How to loop multiple tables in angularjs?
I have HTML like
<div ng-repeat="stuff in moreStuff">
<table>
<h1>stuff.name</h1>
<tr ng-repeat="car in cars">
<td>
<div>{{car.name}}
</td>
stuff
</table>
</div>
but its only rendering 1 table when i have 3 stuff in moreStuff
You should check your html sintax.
<div ng-repeat="stuff in moreStuff">
<table>
<h1>stuff.name</h1>
<tr ng-repeat="car in cars">
<td>
<div>{{car.name}}
</td>
stuff
</table>
</div>
You should close the tr and div it using the close marker </> tag, like this
<div ng-repeat="stuff in moreStuff">
<table>
<h1>stuff.name</h1>
<tr ng-repeat="car in cars">
<td>
<div>{{car.name}}</div>
</td>
</tr>
.
.
.
Hope this work
Regards
Your tr and div tags are not closed which is causing this issue so changing your html to
<div ng-repeat="stuff in moreStuff">
<table>
<h1>stuff.name</h1>
<tr ng-repeat="car in cars">
<td>
<div>{{car.name}}</div> <!-- div tag should be closed here -->
</td>
</tr><!--tr tag should be closed-->
stuff
</table>
</div>
should fix the issue
Related
I am trying select specific div located in <td></td> tags mark based on text located in another <td></td> tag. Probably html code will describe it easier:
<tr>
<td>
<div class="name">test1</div>
</td>
<td>
<div class="created">Tom</div>
</td>
<td>
<div class="custom">Disabled</div>
</td>
<td>
<div class="custom">Failed</div>
</td>
</tr>
<tr>
<td>
<div class="name">test2</div>
</td>
<td>
<div class="created">Tom</div>
</td>
<td>
<div class="custom">Disabled</div>
</td>
<td>
<div class="custom">Failed</div>
</td>
</tr>
<tr>
<td>
<div class="name">test3</div>
</td>
<td>
<div class="created">Kate</div>
</td>
<td>
<div class="custom">Disabled</div>
</td>
<td>
<div class="custom">Failed</div>
</td>
</tr>
So on this example what I would like to select by Xpath is the second row and div with Failed text. But I can not use indexing because size and placement is not constant always and can change in time. So only unique field is div with class of name in my case test2.
I was thinking of using maybe following-sibling. Maybe something like this:
\\tr\div[#class='name' and text()='test1'] but what next? div is not sibling but td is.
Any ideas?
I was able to solve it by using:
//td/div[text()='test1']/ancestor::tr/td/div[#class='custom' and text()='Failed']
If you are trying to get the status of the test based on Test Name then use the below xpath.
(//div[normalize-space(.)='test2' and #class='name']/ancestor::tr//div)[last()]
<table>
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
<div style="display:inline-block;width:25%">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
<div style="display:inline-block;width:25%">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
I want it to auto jump to next line if the label text overflow. I no want the label to be hidden or using ellipsis.
Note: In my case, i will loop the div content in the same row td. I want to break the word to next line in full size of browser or browser resized to smaller.
How can i solve this problem?
Apologies for having too less reputation to post a comment.
But have you checked out Bootstrap tables?
It not only solves your problem, but is a good step in moving towards simple web development.
Bootstrap takes care of everything and allows us to make neat and clean tables with very little code from our side.
If at all you need to further style your table, you can add styling OVER the bootstrap styled table.
Check out the following simple tutorial where you can also try it out online.
https://www.w3schools.com/bootstrap/bootstrap_tables.asp
To prove how simple it is,
I have pasted my code into a simple HTML page.
Added bootstrap.
And voila! Your issue is solved in the example given below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<table class="table">
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
<div>
<label>abcdefghijklmnop</label>
</div>
<div>
<input type="checkbox">
</div>
<div>
<label>abcdefghijklmnop</label>
</div>
<div>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td> <label>abcdefghijklmnop</label> </td>
<td> <input type="checkbox"> </td>
</tr>
<tr>
<td> <label>abcdefghijklmnop</label> </td>
<td> <input type="checkbox"> </td>
</tr>
</tbody>
</table>
</body>
</html>
I am still confused on what you wanted, so I have included 2 approaches.
Try Float:right;
<table>
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
<div style="display:inline-block;width:25%">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
<div style="display:inline-block;width:10%; float:right;">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
You can use word-wrap: break-word for your label tag.
The word-wrap property allows long words to be able to be broken and wrap onto the next line. break-word allows unbreakable words to be broken
<table>
<thead>
<tr>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="display:inline-block;width:25%">
<label style="display:block;word-wrap: break-word;">abcdefghijklmnop</label>
<input type="checkbox">
</div>
<div style="display:inline-block;width:10%">
<label style="display:block;word-wrap: break-word;">abcdefghijklmnop</label>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
MDN web docs word-wrap
So...I have literally scoured the internet looking for a solution to this problem and haven't found any answer that directly (or indirectly) suggests an answer.
I am trying to create multiple forms within a table with each row being wrapped in <form> tags like so
<tr ng-repeat="item in items">
<form ng-submit="updateItem(item)">
<td ng-bind="$index + 1"></td>
<td ng-bind="item.title"></td>
<td><button>Submit</button></td>
</form>
</tr>
It seemed to work as intended until I realized that ng-repeat was not wrapping the <form> tag around the <td> tags and it ended up looking like so
<tr ng-repeat="item in items">
***<form ng-submit="updateItem(item)"></form>*** //The form tags were unwrapped
<td ng-bind="$index + 1"></td>
<td ng-bind="item.title"></td>
<td>
***<button>Submit</button>*** //Buttons don't submit cos no form
</td>
</tr>
whilst what I really want to achieve is something like
<tr>
<form>
<td>
<button>Hi</button>
</td>
</form>
</tr>
<tr>
<form>
<td>
<button>Hello</button>
</td>
</form>
</tr>
I would really love some help with how to deal with this.
You can unite cells:
<tr ng-repeat="item in items">
<td colspan="3">
<form ng-submit="updateItem(item)">
...
</form>
</td>
</tr>
Or use ngForm directive instead of form (and add submit on enter manually):
<tr ng-repeat="item in items" ng-form="myForm">
<td ng-bind="$index + 1"></td>
<td ng-bind="item.title"></td>
<td><button type="button" ng-click="updateItem(item)">Submit</button></td>
</tr>
You can add a new table in every row like this;
<table>
<tr ng-repeat="item in items">
<td>
<form ng-submit="updateItem(item)">
<table>
<tr>
<td ng-bind="$index + 1"></td>
<td ng-bind="item.title"></td>
<td><button>Submit</button></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
Well, thanks to #pegatron and the Stack Overflow link he provided using #tjbp answer I ended up using the form attribute of input fields and that did it for me. Though its not been tested on all browsers, it does the trick of HTML5 validations. Here's what I ended up with.
<tr ng-repeat="item in items">
<form ng-submit="updateItem(item)" id="{{item.title}}">
<td ng-bind="$index + 1"></td>
<td ng-bind="item.title"></td>
<td><button form="{{item.title}}">Submit</button></td>
</form></tr>
And with this the form and its linked inputs gets sent with the button click.
Thanks.
I want to left-justify one item, and right-justify the other item inside a single td. Is that doable? Thanks.
test.php
<table border = '1'>
<tr><td>Left-justified Right-justified</td></tr>
<tr><td>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</td></tr>
</table>
Try this...
<table border = '1'>
<tr>
<td>
<span >Left-justified</span>
<span style="float:right;"> Right-justified</span>
</td>
</tr>
<tr>
<td>
TEXTTEXTTEXTTEXTTEXTTEXTTEXT
</td>
</tr>
</table>
i have a table that consists of two rows, the second row is a table, which i want it's elements to be centered to the main table, so my code is as follows:
<TABLE>
<TBODY>
<TR>
<TD>
<DIV id=gform:scan_area>
<OBJECT></OBJECT>
</DIV>
</TD>
</TR>
<TR>
<TD>
<TABLE style="PADDING-LEFT: 300px"> // works in firefox but doesn't work in ie9
<TBODY>
<TR>
<TD>
<INPUT>
</TD>
<TD>
<SPAN></SPAN>
</TD>
<TD>
<INPUT>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
ISSUE: TABLE style="PADDING-LEFT: 300px" works fine in firefox but doesn't work in IE9 (Quirks mode), please advise how to fix this issue or if you have any other ideas.
I think your code is not written well enough, it was much better if you used "colspan" for solving this issue.
Any way, I tried to change your code in a way that centralize the second table in the first table:
<TABLE>
<TBODY>
<TR>
<TD>
<DIV id='gform:scan_area'>
<OBJECT></OBJECT>
</DIV>
</TD>
</TR>
<TR>
<TD>
<TABLE style="width:60%">
<TBODY>
<TR>
<TD style="width:20%;padding-right:160px;">
<INPUT>
</TD>
<TD style="width:20%">
<SPAN></SPAN>
</TD>
<TD style="width:20%">
<INPUT>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
You need to do it this way
<div style="padding-left: 300px;">
<table>
...
</table>
</div>
For more read this answer: Padding table with CSS doesn't work on IE
Table padding is only applied to cells. By adding it to the <td> you will see it work in IE9 and Firefox. See: W3schools: Tables
<TABLE> // works in firefox but doesn't work in ie9
<TBODY>
<TR>
<TD style="PADDING-LEFT: 300px">
<INPUT>
</TD>
<TD >
<SPAN></SPAN>
</TD>
<TD>
<INPUT>
</TD>
</TR>
</TBODY>
</TABLE>