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?
Related
I have a bootstrap table with expanding rows. Each row can expand into multiple rows, and those can too expand in multiple rows (3 levels in total).
The search does find items on the 3rd level but it doesn't display them correctly.
This is an example code on codepen.
https://codepen.io/anon/pen/gGOOBz
My HTML code is:
<table st-table="displayedCollection" st-safe-src="domains" class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th st-sort="name">Domains</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="Search ..." type="text" /></th>
</tr>
</thead>
<tbody ng-cloak>
<tr ng-repeat-start="row in displayedCollection">
<td id="package1-{{$index}}" class="accordion-toggle data-exists cursor-pointer" data-toggle="collapse" data-parent="#OrderPackages-{{$index}}" data-target=".packageDetails1-{{$index}}">{{row.name}}
</td>
</tr>
<tr ng-repeat-end>
<td id="package2-{{$index}}" colspan="3">
<div class="accordion-body collapse packageDetails1-{{$index}} + 1">
<table st-table="beansCollection" st-safe-src="types" class="table table-condensed" style="border-collapse:collapse;">
<!--<thead>
<tr>
<th st-sort="name">Types</th>
</tr>
</thead>-->
<tbody>
<tr ng-repeat-start="beanType in row.beans">
<td id="type1-{{$index}}" class="accordion-toggle" data-toggle="collapse" data-parent="#typePackages-{{$index}}" data-target=".typesDetails1-{{$index}}">
{{beanType.name}}
</td>
<td align="right">
<button ng-click="getBeanName(beanType.name, null, beanType)" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-default" ng-if="showButton(beanType.beans)">
Display
</button>
</td>
</tr>
<!---->
<tr ng-repeat-end ng-visible="false">
<td id="typeId2-{{$index}}" colspan="3">
<div class="accordion-body collapse typesDetails1-{{$index}} + 1">
<table class="table table-condensed">
<tbody>
<tr ng-repeat="leafBean in beanType.beans">
<td>
{{leafBean.name}}
</td>
<td align="right">
<button ng-click="getBeanName(beanType.name, leafBean.name, leafBean)" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-default">Display</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
I want that when I search something under a certain row it would be displayed with the row above already expanded.
PHOTO:
Say I want to search for TBLEXCHANGEMEMBERSHIPS which is on the 3rd level.
When I input it into the search bar, it finds it but doesn't display it correctly.
What should I do?
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.
Below is the html I have used to show data in the table, its working fine.
Now I want to convert it to jQuery Datatables.
HTML:-
<table cellpadding="3" class="table table-bordered">
<thead>
<tr class="success">
<th style="cursor: pointer;" ng-click="sort('DOB')"><b>DOB</b> <span class="glyphicon sort-icon" ng-show="sortKey=='DOB'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th style="cursor: pointer;" ng-click="sort('StateName')"><b>State</b> <span class="glyphicon sort-icon" ng-show="sortKey=='StateName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th style="cursor: pointer;" ng-click="sort('FileId')"><b>Image</b> <span class="glyphicon sort-icon" ng-show="sortKey=='FileId'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th><b>Actions</b></th>
</tr>
</thead>
<tbody>
<tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:5" ng-model="search">
<td>{{employee.DOB | date:'MM/dd/yyyy' }}
<td>{{employee.StateName}}
</td>
<td>
<img ng-src="UploadedFiles/{{employee.FilePath}}" class="img-circle" style="max-width: 50px" alt='Employee Image Missing' />
</td>
</tr>
</tbody>
</table>
Im wondering why an animation will not work on the <tr> element in this case (plnkr):
<tr data-ng-repeat-end data-ng-show="employee.show" class="animate-show">
<td colspan="5">
<div class="employeeInfo">
<img ng-src="http://placehold.it/{{employee.size}}" />Employee info
</div>
</td>
</tr>
But will work on the <td> element when written like this (plnkr):
<tr data-ng-repeat-end ng-animate-children>
<td colspan="5" data-ng-show="isToggled[$index]" class="animate-show">
<div class="employeeInfo">
<img ng-src="http://placehold.it/{{employee.size}}" />Employee info
</div>
</td>
</tr>
Why is this happening, and what can be done to achive animation on the <tr> with data-ng-repeat-end attribute?
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)