Incompatibility between AngularJS and Firefox - angularjs

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.

Related

Assign value after ng-if

I'm trying to do a table with ng-repeat. This is my code
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" class="{{n.fondo}}">
<td style="width: 32%;"><div class="bordeTab">
<div class="{{n.color}}First" >
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF" ng-if="n.nombre == dato.nombre">
<div class="{{n.color}}" >
{{dato.valor}}
</div><br>
</td>
</tr>
</tbody>
</table>
Once it enter to this ng-repeat="dato in datosCF", I do and if to print a value, but if the if returns me false I need to print this "-".
It sounds like you want to include all rows, but the content of the row is different based on some condition. If that's the case, you can try moving the conditional logic into the body of your <td> element, and having two divs with contradictory ng-if expressions:
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" ng-class="n.fondo">
<td style="width: 32%;"><div class="bordeTab">
<div ng-class="n.color + 'First'">
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF">
<div ng-if="n.nombre === dato.nombre" ng-class="n.color">
{{dato.valor}}
</div>
<div ng-if="n.nombre !== dato.nombre">
-
</div><br>
</td>
</tr>
</tbody>
</table>
I also changed your interpolated class attributes to ng-class.

How to get the td element without using row number in protractor

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;
}

How can I can make ng-repeat as group?

Here Is my code.
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<div id="exportable">
<table class="table table-striped table-bordered table-hover dataTable" id="example">
<thead>
<tr>
<th style="background-color: #f5f5f5;">Device Number</th>
<th style="background-color: #f5f5f5;">Name</th>
<th style="background-color: #f5f5f5;">MobileNumber</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in SubscriptionList">
<td>
<button ng-if="obj.expanded" ng-click="obj.expanded = false">-</button>
<button ng-if="!obj.expanded" ng-click="obj.expanded = true">+</button>
</td>
<td>{{ obj.DEVICENUMBER}}</td>
<td>{{ obj.NAME}}</td>
<td>{{ obj.MOBILENUMBER}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.table-responsive -->
</div>
</div>
<!-- /.row -->
Result Is Coming like
Name Mobile Device
A 112 Nokia
A 112 Samsung
B 111 Videocon
B 111 LG
I want There is an expand button on Name,when I expand below all the details will show
You could use ng-repeat-start and ng-repeat-end and add an additional tr to your table with an ng-if. That way when you click on the button there will be an extra row just under the one which holds the button.
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<div id="exportable">
<table class="table table-striped table-bordered table-hover dataTable" id="example">
<thead>
<tr>
<th style="background-color: #f5f5f5;">Device Number</th>
<th style="background-color: #f5f5f5;">Name</th>
<th style="background-color: #f5f5f5;">MobileNumber</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="obj in SubscriptionList">
<td>
<button ng-if="obj.expanded" ng-click="obj.expanded = false">-</button>
<button ng-if="!obj.expanded" ng-click="obj.expanded = true">+</button>
</td>
<td>{{ obj.DEVICENUMBER }}</td>
<td>{{ obj.NAME }}</td>
<td>{{ obj.MOBILENUMBER }}</td>
</tr>
<tr ng-repeat-end ng-if="obj.expanded">
<td colspan="4">expanded</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

Bootstrap dropdown using accordion is not working

I am implementing bootstrap dropdown in my Angular application using accordion. When I click on accordion toggle, it is not sliding down and up.
This is my code:
<div class="container-fluid mt100 mr5 ml5">
<div class="row">
<table class='table s12'>
<tr style="background: #e4e9eb;">
<td>Name</td>
<td>Address</td>
<td>City</td>
<td>Edit</td>
<td></td>
</tr>
<tr ng-repeat="listItem in Items">
<td>
{{listItem.name}}
</td>
<td>
{{listItem.address}}
</td>
<td>
{{listItem.city}}
</td>
<td>
<a class="dropdown-toggle" ng-click="isCollapsed = !isCollapsed" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</a>
</td>
</tr>
<tr>
<td colspan="3" class="hiddenRow">
<div class="collapse" collapse="isCollapsed">
<table class="table display" style="border-collapse:collapse;">
<thead>
<tr class='pix2' style="background: #e4e9eb;">
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in listItem.subItems'>
<td>{{item.first}}</td>
<td>{{item.second}}</td>
<td>{{item.third}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
What is causing the issue?

First matching element using CSSSelector

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)

Resources