AngulaJS Hide/Show tablerows depending on several conditions/hide all - angularjs

I have a table, in which i would like to only show rows that match some variables, as well as hide/show all rows.
So, with additional variables to add later, how would i implement a hide/show all functionallity preferably with keeping the <"a> tags
<span class="glyphicon glyphicon-triangle-bottom"></span> Expand all
<span class="glyphicon glyphicon-triangle-right"></span> Hide all
<table style="width: 50%" class="table table-striped table-bordered table-hover">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-3">
<col class="col-xs-3">
<col class="col-xs-1">
</colgroup>
<thead>
<th>ID</th>
<th> name</th>
<th> name</th>
<th>Action</th>
</thead>
<tbody>
<tr class="{{ a.b ? 'danger' : 'success' }}" ng:repeat:start="entity in entities">
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>{{a.asd.name}}</td>
<td>
<a class="glyphicon glyphicon-pencil" href="#project/{{project.id}}"></a>
<a class="glyphicon glyphicon-triangle-bottom" href="" class="rowtrigger" data-toggle="collapse" data-target="#detail_{{project.id}}"></div>
</td>
</tr>
<tr ng:repeat:end>
<td colspan="4" class="collapse-row">
<div id="detail_{{a.id}}" class="collapse statuslabel">
<span ng:repeat="version in a.versions" class="label label-{{ version.b ? 'danger' : 'success' }}">
{{version.version}}
</span>
</div>
</td>
</tr>
</tbody>
</table>

You could put a click event on the Hide/Show all and have that set a boolean property in the controller. Then bind that boolean property to the ngHide attribute on the rows. You could do something like ng-hide="hideAll || <whatever other conditions you want>"

Related

Search on bootstrap table with expanding rows

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?

Unique DT Instance with Angular DataTables

I have Datatable in ng-repeat and want to be able to generate a unique dt-instance for all datatables in UI. This way I can have a unique instance of each table. Here is my template file with what is going on
<li ng-repeat="batch in vm.batches">
<div ng-show="batch.opened.submitted">
<table datatable="ng" class="table table-condensed dataTable" dt-options="vm.dtOptions" dt-instance="**I WANT TO BE ABLE TO SET THIS TO SOMETHING UNIQUE**">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in batch.PricingItems">
<td>
<a href="javascript:;" ng-click="childInfo(item, batch.dtInstance, $event)" title="Click to view more">
<i class="glyphicon glyphicon-plus-sign"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</li>
You can make it unique by passing the $index value of the ng-repeat.
<li ng-repeat="batch in vm.batches track by $index">
<div ng-show="batch.opened.submitted">
<table datatable="ng" class="table table-condensed dataTable" dt-options="vm.dtOptions" dt-instance="$index">

How can I set the first accordion item in the ngRepeat to be open while the rest are not?

I'm creating a list of tables with collapsible tbodys. This code works fine but I want to have the first tbody open on default. I've tried ng-init="showReports0" on the table tag, but this doesn't work. I've also tried to predefine $scope.showReports0 = true; in the controller. Can anyone help me out here?
<table ng-repeat="set in reportsData" class="table table-striped hover-table report-list" id="reportList-{{$index}}" ng-init="showReports0">
<thead>
<tr>
<th colspan="3" class="trigger-man" ng-model="showReports[$index]" ng-click="showReports[$index] = !showReports[$index]" style="width: 100%;">{{set.type}}<span class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': showReports[$index], 'glyphicon-chevron-right': !showReports[$index]}"></span></th>
</tr>
</thead>
<tbody ng-hide="!showReports[$index]">
<!-- Start Dynamic Reports Content -->
<tr class="hover-check" ng-class="{'compare-row disabled': item.type=='Comparative' && selectionData.length == 1, 'rep-checked': item.checked}" ng-repeat="item in set.reports | orderBy : 'sequence'">
<td class="no-pad"><div href="" class="popup pop-details no-match" uib-popover-template="nomatchPopover.templateUrl" popover-trigger="outsideClick" popover-placement="auto"></div>
<label class="checkbox checky">
<input type="checkbox" ng-change="reportPush(item.checked, item)" ng-true-value="true" ng-false-value="false" ng-model="item.checked" class="hidden">
</label></td>
<td class="rep-list-td"><div href="" class="popup pop-details no-compare" uib-popover-template="comparePopover.templateUrl" popover-trigger="outsideClick" popover-placement="auto"></div>
{{item.name}}</td>
<td class="cell-details">Details</td>
</tr>
</tbody>
</table>

How to convert an existing table(Html) to jQuery datatable in AngularJS

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>

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?

Resources