angularjs smart table (st-table) issue with ngInclude - angularjs

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.

Related

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>

Edit function not working after sort the data in angular js datatable

I have a table on html page and this table have 15 records. each column have sorting functionality.
There is a edit button on each row to edit row value in separate tab, its working fine before sorting of data.
Means if you have clicked on table's column than edit function is not called.
`<table id="tbl" class="table table-striped table-bordered"
datatable="ng" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Code</th>
<th>Status</th>
<th>Notes</th>
<th>Description</th>
<th style="text-align:center">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in entities">
<td>{{e.name}}</td>
<td>{{e.code}}</td>
<td>{{getStatus(e.status)}}</td>
<td>{{e.notes}}</td>
<td>{{e.description}}</td>
<td align="center">
<span class="glyphicon glyphicon-pencil" />
<span style="color: #ddd;">|</span>
<span class="glyphicon glyphicon-trash" />
</td>
</tr>
</tbody>
</table>
And controller code as below :
$scope.edit = function (entity) {
alert('name');
$scope.entity = entity;
$scope.activate('view');
};
This function named as edit called until we not click on header of data table.
please suggests what is issue.. thanks in advance

How to increase ng-repeat performance using Smart-Table?

I have a problem of performance and i don't find the solution.
Context: I need to display a lot of data ( 500 lines, 8 columns ) in a table. To displayed this data i chosed to use Smart-table because it offers good functionality but the problem is that i have a lot of data and the time of displaying data is very long ( 5 - 9 second, this depend of device performance ).
Important thing: I need to display all data so i don't want pagination method, limit filter.
So this code is working :
<ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" >
<table st-table="tableaux" class="table table-striped">
<thead>
<tr>
<th ng-repeat="column in ColumnTable">{{column.Label}}</th>
</tr>
<tr>
<th ng-repeat="column in ColumnTable">
<input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in tableaux">
<td ng-repeat="column in ColumnTable" ng-init="colonne = column.Id">{{row[colonne]}}</td>
</tr>
</tbody>
</table>
</ion-scroll>
I read that Ionic made a directive (collection-repeat) wich allows an app to show huge lists of items much more performantly than ng-repeat. So i tried to remake my solution with collection-repeat but that doesn't work...
Code collection-repeat solution:
<ion-scroll class="scrollVertical">
<table st-table="tableaux" class="table table-striped">
<thead>
<tr>
<th ng-repeat="column in ColumnTable">{{column.Label}}</th>
</tr>
<tr>
<th ng-repeat="column in ColumnTable">
<input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/>
</th>
</tr>
</thead>
<tbody>
<tr collection-repeat="row in tableaux" item-width="200px" item-height="100px">
<td collection-repeat="column in ColumnTable" ng-init="colonne = column.Id" item-width="100px" item-height="100px">{{row[colonne]}}</td>
</tr>
</tbody>
</table>
</ion-scroll>
Error: Maximum call stack size exceeded
Questions: Is there any angularjs or ionic solution to increase performance of smart-table with a lot of data ?
What's wrong with my collection-repeat ?
What version of Ionic are u using? If you are using version 1.0 beta 14 or higher use bind once (native in Angular 1.3)
It would like like this.
<ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" >
<table st-table="tableaux" class="table table-striped">
<thead>
<tr>
<th ng-repeat="column in ::ColumnTable">{{::column.Label}}</th>
</tr>
<tr>
<th ng-repeat="column in ::ColumnTable">
<input st-search="{{::column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in ::tableaux">
<td ng-repeat="column in ::ColumnTable" ng-init="colonne = column.Id">{{::row[colonne]}}</td>
</tr>
</tbody>
</table>
</ion-scroll>
How are you loading your datas ?
If you are doing a $scope.ColumnTable.push(newData); then this is not a proper way to do it.
What I do is :
create a service that load a Temporary Table : let's call it myService.setTable().
Inform your controller with an event : This service sends an event $rootScope.$broadCast("myService.setTable-refresh")
Catch the event into your controller & update table : $scope.$on('myService.setTable-refresh,function(){ $scope.myWorkingTable =myService.getTable();});
Update your HTML to work with myWorkingTable
Moreover, you shall define an unique key into your ng-repeat for performance optimisation used by track by to prevent rebuilding already created content.
See explanation here : http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

Bootstrap collapse close other on click

I am using ng-repeat from AngularJS in a table.
When I click on a row, there is data that appears just below this row.
The problem is that when I click on another row while one is already expanded, both are expanded.
I would like to close the first one and expand the second one.
HTML
<div id="accordion">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-10">Name</th>
<th class="col-md-1">Collateral</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="pack in packages | filter:search" id="row">
<td data-toggle="collapse" data-target="#collapse{{$index}}" data-parent="#accordion" ng-click="expand(pack)">{{pack.name}}</td>
<td><button class="btn btn-info"><span class="glyphicon glyphicon-open-file"></span></button></td>
<td><input type="radio" ng-model="$parent.selectedPackage" ng-value="pack" /></td>
</tr>
<tr ng-repeat-end>
<td colspan="3">
<div class="collapse" id="collapse{{$index}}">
<table class="table">
<tbody>
<tr>
<td>{{indication}}</td>
</tr>
<tr ng-repeat="bb in bananas">
<td>{{bb.name}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
first you don't need of unique id for it... Just try with https://github.com/angular-ui/bootstrap/tree/master/src/collapse or in your case maybe: https://github.com/angular-ui/bootstrap/tree/master/src/accordion
Good Luck.

Pop up calendar for date selection in selenium java

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 .

Resources