Given this snippet:
<tr class="ng-scope" ng-repeat="config in list.elements">
<td class="ng-binding">6grxe</td>
<td class="ng-binding">ComplexTest</td>
<td class="ng-binding">2016-11-25 10:35:03</td>
</tr>
<tr class="ng-scope" ng-repeat="config in list.elements">
<td class="ng-binding">l7yc</td>
<td class="ng-binding">SimpleTest</td>
<td class="ng-binding">2016-11-25 10:35:15</td><!--how to locate this ?-->
</tr>
I tried to locate the marked element on firefox console using xpath like this:
$x("//following-sibling::td[text()='SimpleTest']")
However, the returned element is
<td class="ng-binding">SimpleTest</td>
Whats wrong with my xpath?
I think you want the path //td[. = 'SimpleTest']/following-sibling::td[1] to select the td element immediately following the td with contents SimpleTest.
You XPath expands to
/descendant-or-self::node()/following-sibling::td[text()='SimpleTest']
Basically you are creating the set of all td elements in the document which contain the text SimpleTest in a complicated way.
Related
I have some problems concatenating 2 values in thymeleaf
I do the following:
<tr th:each="p , in: ${info}">
<td th:utext="${p.nombre}">...</td>
<td th:utext="${p.preferencias.get(0).getNombrePref()} +'-'+ ${p.preferencias.get(1).getNombrePref()}">...</td>
<td th:utext="${p.email}">...</td>
</tr>
This is how the page looks like
As you can see this is not dynamic because if p.preferencias size is bigger than 2 this will be a problem and the same if is less than 2
this what i tried :
<tr th:each="p , in: ${info}">
<td th:utext="${p.nombre}">...</td>
<td th:each="a , arcd : ${p.preferencias}" th:utext="${p.preferencias.get(arcd.index).getNombrePref()}">...</td>
<td th:utext="${p.email}">...</td>
</tr>
This is what i got:
And got this
As you can see the second value move to email :( then i thought in concat the values and try this :
<tr th:each="p , in: ${info}">
<td th:utext="${p.nombre}">...</td>
<td th:each="a , arcd : ${p.preferencias}" th:utext="${p.preferencias.get(arcd.index).getNombrePref()} + '-' +${p.preferencias.get(arcd.index).getNombrePref()} " >...</td>
<td th:utext="${p.email}">...</td>
</tr>
And this is the result:
Result 3
I dont know how to concat the values and keep those in one cell
How can i execute the loop to get all the values inside p.preferencias variable ?
EDIT:
post wrong image in result 3 now is the correct image
Finally solve the problem the tag td stay open thats why the secon value in the each iteration fill the next cell solve it using a span tag and iterate inside
<tr th:each="p , in: ${info}">
<td th:utext="${p.nombre}">...</td>
<td>
<span th:each="a , arcd : ${p.preferencias}" th:utext="${p.preferencias.get(__${arcd.index}__).getNombrePref()} + (${arcd.size-1 > arcd.index}? ', ':'')"></span>
</td>
<td th:utext="${p.email}">...</td>
</tr>
Output
I am trying to apply cell-level styling to a table with ng-reapt and ng-class.
This is what I am trying to do:
<tr ng-repeat="transaction in transactionsArr" class="no-top-border">
<td ng-class="{{transaction.cellstyle}}">{{transaction.Reason}}</td>
<td class="align-right">{{transaction.account}}</td>
<td class="align-right">{{transaction.Amount| number:0}}</td>
<td class="align-right">{{transaction.Balance| number:0}}</td>
</tr>
However I am getting errors with this.
I have looked at this question but it is not working.
Is this not possible to apply specific styling each entry with ng-repeat?
Thank you.
I am trying to use smart-tables, Select row plugin, I have added 'smart-table' to my application, like so var myApp = angular.module('myApp', ['ui.bootstrap','smart-table']);
I have also changed the first line of the directive (since it didn't work to just copy-paste it), I changed this:
ng.module('smart-table').directive('stSelectRow', ['stConfig', function (stConfig)
To this: myApp.directive('stSelectRow', ['stConfig', function (stConfig) {
In my html I have this
<table st-table="displayedCollection" st-safe-src="safeCollection" class="table">
<thead>
<tr>
<th>Title</th>
<th>FieldOne</th>
<th>FieldTwo</th>
<th>FieldThree</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in displayedCollection">
<td> {{row.Title}} </td>
<td> {{row.FieldOne}} </td>
<td> {{row.FieldTwo}} </td>
<td> {{row.FieldThree}} </td>
</tr>
</tbody>
If I remove the st-select-row="row" st-select-mode="multiple" the table works, but obviously not the row selection
I am guessing I'm missing some dependency or something, I have only added smart-table.min.js to my application, but I think that should be enough, the directive (select row plugin) is added inside my app.js file. What could it be?
It is because the documentation on the site isn't exactly clear. But it does say
...and the class attribute st-selected is set on the tr element.
You have to define the CSS for st-selected for it to "work":
.st-selected{
background: #216eff !important;
color: white !important;
}
Folks I am using a simple ng-repeat directive to display data in table.
However when the directive renders, the first column takes up all the space and dis-figures the table.
Take a look at the plnkr here :
http://plnkr.co/edit/Hahh4uyQ130zOS8noC3D
please focus on the file layout.html
<table>
<thead>
<tr ng-repeat="element in header" class="header-cells" style="width:{{element.width}}px">
<th drop-down-sort-menu>{{element.column}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="element in body">
<td ng-repeat="h in header" row="{{$parent.$index}}" col="{{$index}}" style="width:{{element.width}}px">{{element[h.column]}}
</td>
</tr>
</tbody>
</table>
I am sure it's something minor. any clues
I believe you problem is that for the headers, you have 4 TRs with only one TH, as opposed to one TR with 4 THs. For this reason, the cells on your headers are not matching the cells on your body.
Do the first ng-repeat at the TH level.
Give it a try and let me know.
Since examples always tell more then just words here is what I would like to do in another language
<tr>
<c:forEach items="${items}" var="item">
<td>...</td>
<td>...</td>
<td>...</td>
<c:if test="${item.showWarning}">
</tr><tr><td colspan="3">${item.warning}</td>
</c:if>
</tr>
So this will loop over a set of items and show some properties of these items. If there is a warning, a new row will be added underneath the current row in which the warning will be shown. However, how can I do this in angularJs? If I put a ng-repeat on the tr, it will stop at the first end tag of tr. I have read on some other threads that this is not very easily done, but how can it be done? And yes, I really do want to use a table. Here is my contrived example with angularjs which is obviously not working as I would like it to. Any pointers how this can be done?
JSBin example with tr-ng-repeat
Currently (1.0.7/1.1.5) you can't output data outside the ng-repeat, but version 1.2(see youtube video AngularJS 1.2 and Beyond at 17:30) will bring the following syntax(adapted to your example):
<tr ng-repeat-start="item in items">
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr ng-repeat-end ng-show="item.showWarning">
<td colspan="3">{{item.warning}}</td>
</tr>
The idea is that whatever is between -start and -end will be repeated including the -end element.
One solution that I can think of is having multiple tbody tags within the same table. Here is a discussion on the use of multiple tbody tags within the same table.
So, for your issue, you could have the following setup:
<table ng-controller="ItemController">
<thead>
<th>Name</th>
<th>Description</th>
<th>warning?</th>
</thead>
<tbody ng-repeat="item in items">
<tr>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.warning}}</td>
</tr>
<tr ng-show="item.warning">
<td colspan="3" style="text-align: center">Warning !!!</td>
</tr>
</tbody>
</table>
Repeat the table body as many times as there are entries for the table and within it have two rows - one to actually display the row entry and one to be displayed conditionally.
You can repeat over the tbody
<tbody ng-repeat="item in items">
<tr>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.warning}}</td>
</tr>
<tr ng-show="item.warning">
<td colspan="3">Warning !!!</td>
</tr>
</tbody>
Also you do not need to wrap the ng-show expression in {{}}, you can just use item.warning