My tables do not appear in Firefox. I saw that there is a compatibility problem with Firefox with AngularJS, what can I do?
Follow the code.
<table class="displayTagCss">
<thead>
<th style="width: 50px;"> </th>
<th style="width: 50px;">Ordem</th>
<th>Alertas</th>
<th>Proposição</th>
<th>Situação</th>
<th style="width: 50px;"> </th>
</thead>
<tbody>
<tr ng-repeat="proposicao in gruposSentencas['<c:out value='${grupo.idSentencaDePesquisa}' />']">
<td style="text-align: center;">
<img alt="Subir" title="Subir" ng-show="!$first" src="<html:rewrite page='/imagens/botao_subir.gif' />" ng-click="subirProposicao('<c:out value='${grupo.idSentencaDePesquisa}' />', $index)" />
<img alt="Descer" title="Descer" ng-show="!$last" src="<html:rewrite page='/imagens/botao_descer.gif' />" ng-click="descerProposicao('<c:out value='${grupo.idSentencaDePesquisa}' />', $index)" />
</td>
<td style="text-align: center;">{{$index+1 }}</td>
<td>
<div class="hover" ng-if="(proposicao.alertas.length > 0) || proposicao.haPendencia">
<img src="<html:rewrite page='/imagens/gfx/warning.png'/>" />
<div class="appear">
<ul>
<li class="alerta_proposicao" ng-repeat="alerta in proposicao.alertas">{{ alerta }}</li>
<li class="alerta_proposicao" ng-if="proposicao.haPendencia"><span>Observações de fase: </span>{{proposicao.textoObservacao}}</li>
</ul>
</div>
</div>
</td>
<td>{{ proposicao.identificadorDaProposicao }}</td>
<td>{{ proposicao.situacao }}</td>
<td style="text-align: center;"><img src="<html:rewrite page='/imagens/chk_off.png' />" ng-click="removerProposicao('<c:out value='${grupo.idSentencaDePesquisa}' />', $index)" alt="Excluir" title="Excluir" /></td>
</tr>
</tbody>
</table>
The 'thead' works, but the 'tbody' does not appear in Firefox.
I have the existing method like below,
getSpecificCell: function(tableObject, rowNumber, columnCss) {
var ele = element(by.repeater(tableObject).row(rowNumber)).element(by.css('[' + columnCss + ']'));
return ele;
}
Is that possible to do the same using the row text instead of rowNumber?
Form the below html I need to get the column value without using the row number
HTML sample:
<table class="table">
<thead>
<tr>
<th class="checkbox-column"></th>
<th class="main-column main-column--checkbox">Name</th>
</tr>
</thead>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW2</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
<tbody ng-repeat="(a, b) in tests" class="ng-scope" style="">
<tr class="panel__sub-header">
<td>
<input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox">
</td>
<td colspan="4">
<h4 class="ng-binding">ROW1</h4>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.name</a>
</td>
</tr>
<tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style="">
<td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td>
<td class="main-column">
<a ng-href="#" class="ng-binding" href="#">test.data</a>
</td>
</tr>
</tbody>
</table>
You can use filter() method to filter the array of WebElement. have a look at below example,
getSpecificCell: function(tableObject, expectedRowValue, columnCss) {
var ele =element.all(by.repeater(tableObject).filter(function(rowElement){
return rowElement.element(by.css("td h4")).getText().then(function(rowValue){
return rowValue == expectedRowValue;
})
}).first().element(by.css('[' + columnCss + ']'));
return ele;
}
I am trying to found how i can have a table with nested table or second level data. With ng-repeat-start i create the desired ui result but i can't do sorting and filtering in nested data
html code is :
<table ng-table="list.tableParams"
class="table table-condensed table-bordered table-striped">
<tr ng-repeat-start="row in $data">
<td data-title="'Name'" sortable="'name'" filter="{name: 'text'}">
<span ng-if="row.data.length > 0" class="glyphicon"
ng-class="{ 'glyphicon-chevron-right': !row.hideRows, 'glyphicon-chevron-down': row.hideRows }"
ng-click="row.hideRows=!row.hideRows"></span> {{row.name}}
</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
<td data-title="'Country'" filter="{ country: 'select'}"
filter-data="list.countries">{{row.country}}</td>
</tr>
<tr ng-hide="!row.hideRows" ng-repeat="sub in row.data">
<td style="padding-left: 50px" filter="{name: 'text'}">{{sub.name}}<br />
<td>{{sub.age}} members</td>
<td>{{sub.money}}</td>
<td>{{row.country}}</td>
</tr>
<tr ng-repeat-end></tr>
and my data and table params are :
vm.simpleList =[{"name":"Karen","age":45,"money":798,"country":"Czech Republic",
data:[{"name":"lala","age":59,"money":523,"country":"American Samoa"},
{"name":"aaa","age":56,"money":540,"country":"Canada"},
{"name":"Cat","age":57,"money":746,"country":"China"},
{"name":"Christian","age":59,"money":572,"country":"Canada"},
{"name":"Tony","age":60,"money":649,"country":"Japan"},
{"name":"Cat","age":47,"money":675,"country":"Denmark"}]},
{"name":"Cat","age":49,"money":749,"country":"Czech Republic"},
{"name":"Bismark","age":48,"money":672,"country":"Denmark"},
{"name":"Markus","age":41,"money":695,"country":"Costa Rica"},
{"name":"Anthony","age":45,"money":559,"country":"Japan"},
{"name":"Alex","age":55,"money":645,"country":"Czech Republic"},
{"name":"Stephane","age":57,"money":662,"country":"Japan"},
{"name":"Alex","age":59,"money":523,"country":"American Samoa"},
{"name":"Tony","age":56,"money":540,"country":"Canada"},
{"name":"Cat","age":57,"money":746,"country":"China"},
{"name":"Christian","age":59,"money":572,"country":"Canada"},
{"name":"Tony","age":60,"money":649,"country":"Japan"},
{"name":"Cat","age":47,"money":675,"country":"Denmark"},
{"name":"Stephane","age":50,"money":674,"country":"China"},
{"name":"Markus","age":40,"money":549,"country":"Portugal"},
{"name":"Anthony","age":53,"money":660,"country":"Bahamas"},
{"name":"Stephane","age":54,"money":549,"country":"China"},
{"name":"Karen","age":50,"money":611,"country":"American Samoa"},
{"name":"Therese","age":53,"money":754,"country":"China"},
{"name":"Bismark","age":49,"money":791,"country":"Canada"},
{"name":"Daraek","age":56,"money":640,"country":"Costa Rica"},
{"name":"Tony","age":43,"money":674,"country":"Canada"},
{"name":"Karen","age":47,"money":700,"country":"Portugal"},
{"name":"lala","age":0,"money":0,"country":null}];
vm.tableParams = new NgTableParams({
sorting: {name: "asc"},
count: 5
}, {
counts: [],
dataset: vm.simpleList
});
I can't found anywhere an example or a way to do that. If i have nested tables like this :
<table ng-table="list.tableParams">
<tr ng-repeat-start="row in $data">
<!-- td's -->
<td data-title="'Name'" sortable="'name'" filter="{name, data.name: 'text'}">
<span ng-if="row.data.length > 0" class="glyphicon"
ng-class="{ 'glyphicon-chevron-right': !row.hideRows, 'glyphicon-chevron-down': row.hideRows }"
ng-click="list.createNestedTable(row)"></span> {{row.name}}
</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
<td data-title="'Country'" filter="{country: 'select'}"
filter-data="list.countries">{{row.country}}</td>
</tr>
<tr ng-repeat-end ng-hide="!row.hideRows" >
<td>
<table ng-table="list.tableParams2">
<tr ng-repeat="sub in $data">
<td style="padding-left: 50px" filter="{name: 'text'}" sortable="'name'">{{sub.name}}<br />
<td filter="{age: 'number'}" sortable="'age'">{{sub.age}}</td>
<td filter="{money: 'number'}" sortable="'money'">{{sub.money}}</td>
<td filter="{country: 'select'}" sortable="'country'">{{row.country}}</td>
</tr>
</table>
</td>
</tr>
</table>
How can i make filtering in both columns name and data.name (nested data) from the common external filtering? Something like that : filter="{name, data.name: 'text'}"
I am trying to index my ng-repeat so that I can edit a row by making the one with text disappear and the one with inputs appear.
<div ng-controller="BusinessGoalsCtrl">
<table class="table table-hover">
<tr>
<th>Type:</th>
<th>Timeframe:</th>
<th>Goal:</th>
<th>Edit:</th>
</tr>
<tr ng-class="editMode ? 'ng-hide' : ''" ng-repeat="details in businessGoalDetails track by $index">
<td style="width:30%;">{{details.display_name}} {{$index}}</td>
<td style="width:30%;">{{details.timeframe}}</td>
<td style="width:30%;">{{details.threshold}}</td>
<td style="width:10%;"><i ng-click="toggleEdit(true, $index)" class="fa fa-pencil-square-o"></i></td>
</tr>
<tr ng-class="editMode ? '' : 'ng-hide'" ng-repeat="inputs in businessGoalDetails track by $index">
<td style="width:30%;"><input ng-model="inputs.display_name"/></td>
<td style="width:30%;"><input ng-model="inputs.timeframe"/></td>
<td style="width:30%;"><input ng-model="inputs.threshold"/></td>
<td style="width:10%;"><i ng-click="toggleEdit(false, $index)" class="fa fa-check"></i></td>
</tr>
</table>
</div>
Angular Code
$scope.editMode = false;
$scope.details = 0;
$scope.toggleEdit = function (showEdit, $index) {
console.log("editing view");
$scope.editMode = showEdit;
}
You could probably just use ng-if/ng-show instead of ng-class and use ng-repeat-start/end instead of creating 2 different ng-repeats. Also you could just make a single row editable by setting property on its child scope or on the object under iteration. In your code you are setting the property editMode at the parent scope level and not only that it is not specific to each row.
<tr ng-show="!details.editMode" ng-repeat-start="details in businessGoalDetails track by $index">
<!-- ... -->
<td style="width:10%;"><i ng-click="details.editMode=true" class="fa fa-pencil-square-o"></i></td>
</tr>
<tr ng-show="details.editMode" ng-repeat-end>
<td style="width:30%;"><input ng-model="details.display_name"/></td>
<!-- ... -->
<td style="width:10%;"><i ng-click="details.editMode=false" class="fa fa-check"></i></td>
</tr>
Or
<tr ng-show="!editMode" ng-repeat-start="details in businessGoalDetails track by $index">
<!-- ... -->
<td style="width:10%;"><i ng-click="toggleEdit(true)" class="fa fa-pencil-square-o"></i></td>
</tr>
<tr ng-show="editMode" ng-repeat-end>
<td style="width:30%;"><input ng-model="details.display_name"/></td>
<!-- ... -->
<td style="width:10%;"><i ng-click="toggleEdit(false)" class="fa fa-check"></i></td>
</tr>
and
$scope.toggleEdit = function (showEdit) {
this.editMode = showEdit; //'this' here is the child scope
}
So, I am trying to get the test of the column Title or Names or DateTime
I'm trying to get the test td element and I have tried the following using CSSSelector:
div#body-inner div#ctl00_ContentPlaceHolder1_Control1_pnlList div table#ctl00_ContentPlaceHolder1_Control1_gv.gv tbody tr.item td:nth-child(4)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head id="ctl00_PageHead">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Employee</title>
<body id="ctl00_PageBody">
<form name="aspnetForm">
<div>
</div>
<div>
</div>
<table class="global-table" cellpadding="0" cellspacing="0">
<tr class="body">
<td>
<div id="body">
<div id="body-inner">
<h1>
Employee Information</h1>
<div id="ctl00_ContentPlaceHolder1_Control1_pnlList" style="width: 100%;">
<div class='filter'>
</div>
<div>
<table class="gv" cellspacing="0" border="0" id="ctl00_ContentPlaceHolder1_Control1_gv" style="border-collapse: collapse;">
<tr class="header">
<th class=" nolink" scope="col">
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Phone')">
Phone</a>
</th>
<th class=" sorted-desc" scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Title')">
Title</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$SubTitle')">
SubTitle</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Names')">
Names</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Names')">
Enames</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Active')">
Active</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$DateTime')">
DateTime</a>
</th>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$0')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
8/23/2011
</td>
</tr>
<tr class="altItem">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$1')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test1
</td>
<td>
1
</td>
<td>
Employee
</td>
<td>
</td>
<td>
</td>
<td>
7/31/2014
</td>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$2')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test2</td>
<td>
111
</td>
<td>
Employer
</td>
<td>
</td>
<td>
</td>
<td>
7/31/2013
</td>
</tr>
<tr class="altItem">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$3')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test3</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
8/23/2011
</td>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$4')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test4</td>
<td>
2
</td>
<td>
Employer
</td>
<td>
</td>
<td>
</td>
<td>
7/31/2012
</td>
</tr>
<tr class="altItem">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$5')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test5</td>
<td>
3
</td>
<td>
Employer
</td>
<td>
</td>
<td>
</td>
<td>
7/31/2012
</td>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$6')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Test6
</td>
<td>
a
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
7/20/2012
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="footer">
<td>
</td>
</tr>
</table>
</form>
</body>
</html>
the result I am getting is all the matching elements but how can I get only the td which is test?
<td >
test
</td>
<td >
DEMO TEST OCT 25
</td>
<td class="firefinder-match">
DEMO TEST OCT 25
</td>
<td >
DEMO TEST OCT 25
</td>
<td >
DEMO TEST OCT 25
</td>
<td >
DEMO TEST OCT 25
</td>
The issue lies with tr.item. There are multiple rows with that class and you are selecting all of them. Be more specific by using the first-child pseudo class so it will only select the first tr.item and not all of them.
Here is how I able to get:
table#ctl00_ContentPlaceHolder1_Control1_gv.gv tbody tr.item:nth-child(3) > td:nth-of-type(3)