I am creating dynamic headers of a table like this:
<thead>
<tr>
<th width="5%" class="shrink">
<input type="checkbox" id="selectedAll" ng-model="selectedAll" ng-click="selectAll()" />
</th>
<th class="header" data-href="" rel="tooltip" title="" ng-repeat="header in tableHeaders" width="header.width">
<a style="cursor: pointer;" ng-click="Search(1,header.colName,
sorting.reverseSort=!sorting.reverseSort)">
{{header.name}}
<span ng-show="orderBy == header.colName">
<i ng-class="sorting.reverseSort ? 'fa fa-sort-asc' : 'fa fa-sort-desc'"></i>
</span>
</a>
</th>
<th width="10%" class="last shrink"></th>
</tr>
</thead>
But “header.width” is not applying as it is in a same element as ng-repeat.
So what is work around for this?
Please guide me.
Thank you.
Use curly braces:
<th class="header" data-href="" rel="tooltip" title="" ng-repeat="header in tableHeaders" width="{{header.width}}">
Try this
<th title="" ng-repeat="header in tableHeaders" ng-style="{'width': header.width}">
Related
I had a page working fine with st-table in angularjs (1.8.x).
Ref: Smart Table Website or on Git Hub.
Because the page was becoming too big (HTML), as a quick fix I put the sections into diff HTML files and then used ng-include on main page. But since then the st-search stopped working.
Check the code:
<table class="table table-condense table-striped table-bordered" ng-hide="vmModelMg.currentModel.exclusionParts.length==0" st-safe-src="vmModelMg.currentModel.exclusionParts" st-table="dispExclPartsList">
<thead style="overflow-y:scroll;">
<tr>
<th colspan="2" style="width: 30%; padding-right: 10px;border-right:none;">
<a class="btn btn-primary pull-left" ng-click="vmModelMg.refreshExclusionPartsManual()">Refresh</a>
</th>
<th colspan="3" style="width: 35%;border-right:none;border-left:none;">
Show only Active? :
<!--'{{vmModelMg.isActiveModelFilterExPt}}'-->
<input type="checkbox" st-search="isActive" value="{{vmModelMg.isActiveModelFilterExPt}}" ng-model="vmModelMg.isActiveModelFilterExPt" ng-true-value="true" ng-false-value="" />
</th>
<th style="width: 35%;border-left:none;">
<a class="btn btn-primary pull-right" ng-click="vmModelMg.addNewExclusionPart()">Add new Exclusion Part</a>
</th>
</tr>
<tr>
<th style="width: 10%;"></th>
<th st-sort="partCode" style="width: 15%;">Part Code</th>
<th style="width: 15%;">Transmission Type</th>
<th st-sort="isActive" style="width: 15%;">Is Active?</th>
<th style="width: 45%;">Notes</th>
</tr>
</thead>
<tbody style="overflow-y:scroll;max-height:300px;">
<tr ng-show="dispExclPartsList.length==0">
<td colspan="5" style="width:100%;">
<div class="alert alert-info">
No Exclusion Parts found.
</div>
</td>
</tr>
<tr ng-repeat="exclPartRec in dispExclPartsList">
... td values here ...
</tr>
</tbody>
</table>
I included this using code below:
<ng-include src="'/Scripts/app/Views/manageModels.exclusionParts.html'"></ng-include>
Can someone please advise why if I paste this code in main page it works & if in the ngInclude it doesn't. Now, when I say it doesn't it doesn't show records when tab is loaded. If I click on "Show Active only" checkbox, the filter starts working. But, if same code is on single page, it shows records as soon as I load the tab.
I have this table:
<table class="table tenant-table text-center">
<thead>
<tr>
<th class="text-center">
<i class="fa fa-per"></i> Date
</th>
<th class="text-center">
<i class="fa fa-calendar"></i> Result
</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(k, v) in loanapps track by $index">
<td data-th="Date">{{v.ApplicationDate | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td data-th="Result">
<a ng-if="v.LoanStatus == 'Approved'" ui-sref="approved({loanid: {{v.ApplicationId}}})" class="btn dark btn-sm btn-outline sbold uppercase">
<i class="fa fa-share"></i> View
</a>
</td>
</tr>
</tbody>
</table>
I'm trying to include a parameter, the application id for the approved redirect but I'm not able to include that value in the url. Is the ui-sref approach I'm taking correct or I need to do some tweak?
Just had the same issue. Hopefully I figure out a better way to do it, but for now this will work:
approved({loanid: '{{v.ApplicationId}}'})
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>"
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>
how to select date from calendar pop up? There's a text field which is in disabled mode. When you click on the calendar icon at the corner of the text field the calendar pops up which displays the current date. I need to select the date which is two years back. How do i go about doing that in selenium java?
below is the html code:
<div class="datepicker datepicker-dropdown dropdown-menu" style="display: block; top: 429.1px; left: 234.5px;">
<div class="datepicker-days" style="display: block;">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">
<i class="icon-arrow-left"></i>
</th>
<th class="switch" colspan="5">February 2009</th>
<th class="next" style="visibility: visible;">
<i class="icon-arrow-right"></i>
</th>
</tr>
<tr>
<th class="dow">Su</th>
<th class="dow">Mo</th>
<th class="dow">Tu</th>
<th class="dow">We</th>
<th class="dow">Th</th>
<th class="dow">Fr</th>
<th class="dow">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
<tfoot>
</table>
</div>
<div class="datepicker-months" style="display: none;">
<table class="table-condensed">
<thead>
<tbody>
<tr>
<td colspan="7">
<span class="month">Jan</span>
<span class="month">Feb</span>
<span class="month">Mar</span>
<span class="month">Apr</span>
<span class="month">May</span>
<span class="month">Jun</span>
<span class="month">Jul</span>
<span class="month">Aug</span>
<span class="month">Sep</span>
<span class="month">Oct</span>
<span class="month">Nov</span>
<span class="month">Dec</span>
</td>
</tr>
</tbody>
<tfoot>
</table>
</div>
<div class="datepicker-years" style="display: none;">
</div>
use try catch statement
In try u can search for the element to be present in the page (any unique element related to the date to be selected)
In catch block you can click on the back button .
so in this case it will keep clicking on back/previous button in the calender to go to the previuos year .