I am using smart-table and I would like to get the value of displayedCollection in my controller.
<table id="oldUsersTable" st-table="displayedCollection" st-safe-src="allOldUsers" class="table table-striped">
<thead>
<tr>
<th class="table-width-auto">{{'oldUsers.tableTh_selected' | translate}}</th>
<th class="table-width-auto">{{'oldUsers.tableTh_firstName' | translate}}</th>
<th class="table-width-auto">{{'oldUsers.tableTh_lastName' | translate}}</th>
</tr>
<tr>
<th colspan="3">
<input class="form-control width-max" placeholder="{{'common.searchPlaceholder' | translate}}"
dom-search dom-search-timeout="800" dom-search-table-id="'oldUsersTable'" dom-search-page-size="pageSize"/>
</th>
</tr>
</thead>
<tbody>
<tr class="oldUsersTableTr" ng-repeat="row in displayedCollection" ng-class="selectedUserClass(row)" ng-click="selectUser(row)">
<td class="align-center">
<checkbox model="row.selected" classes="'margin-left-right-auto'"></checkbox>
</td>
<td>
{{row.firstName}}
</td>
<td>
{{row.lastName}}
</td>
<td style="width: 100px !important; height: 50px;">
<button class="btn btn-sm blue-steel oldUserDeleteButton" ng-click="deleteUser(row.uuid)">
{{'oldUsers.deleteUser' | translate}}
<i class="fa fa-trash-o"></i>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-center">
<div id="oldUsersPagination" st-pagination="" st-template="templates/fragments/smartTablePagination.html" st-items-by-page="pageSize" st-displayed-pages="10"></div>
</td>
</tr>
</tfoot>
In the controller I have tried to get the displayedCollection using (in according to this comment https://stackoverflow.com/a/42073243/13057292):
$scope.displayedCollection is undefined.
I have tried implementing this solution without success: https://stackoverflow.com/a/30294098/13057292
A Plunker with an example: http://plnkr.co/edit/DwYTmgaO2fiJjzap?preview
AngularJS v1.5 and smart-table v. 2.1.8
Related
I want to push/pass data of table (itemName, Quantity, retailRate and totalQuantity , totalPrice ) to another component(getDataComponent) when I click button (pushData()) also navigate to receive.
I am not able to send table data in controller. Is this approach is good to send data from one component to another with navigation...
HTML: * send.html*
<table class="table table-hover table-sm"
*ngIf="secondTableData.length">
<thead>
<tr class="table-primary">
<td># </td>
<td>Item</td>
<td>Quantity</td>
<td>Price</td>
<td class="pull-right">Action</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let newdata of secondTableData let i=index;">
<td>{{i+1}}</td>
<td>{{ newdata.itemName }}</td> <!--this data to push in receiveComponent -->
<td class="text-center">{{ newdata.Quantity }}</td> <!--this data to push in receiveComponent -->
<td>{{ newdata.retailRate }}</td> <!--this data to push in receiveComponent -->
</tr>
</tbody>
<thead>
<tr class="table-secondary">
<td>#: {{ secondTableData.length }}</td>
<td></td>
<td class="text-center">TQ: {{ totalQuantity }}</td> <!--this data to push in receiveComponent -->
<td>TP: {{ totalPrice }}</td> <!--this data to push in receiveComponent -->
<td></td>
</tr>
</thead>
</table>
<div>
<hr>
<button class="btn btn-primary pull-right" (click)="pushData()">
<i class="fa fa-check" aria-hidden="true"></i> OK
</button>
</div>
</div>```
**Component.ts:** *sendComponent.ts*
```tabeTata:any
pushData(){
let data:any = this.tabeTata.values;
this.routerService.navigate(['./receive'],{
queryParams:{data:JSON.stringify(data)}
})
}```
**receive.Html** *here i am using random data for demo. I want to place received data to respective places*
```<table class="table table-bordered table-sm">
<thead>
<tr>
<th>SN</th>
<th>Product</th>
<th>Unit</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Custom oil </td>
<td>10</td>
<td>34</td>
<td>340</td>
</tr>
<tr>
<td>2</td>
<td>Digital illustraion </td>
<td>12</td>
<td>50</td>
<td>600</td>
</tr>
<tr class="small" style="height: 10px;">
<td colspan="3" style="border: none;"></td>
<td>Gross Amount:</td>
<td>1100</td>
</tr>
<tr class="small">
<td colspan="3" style="border: none;"></td>
<td>Discount:</td>
<td>100</td>
</tr>
<tr class="small">
<td colspan="3" style="border: none;"></td>
<td>VAT</td>
<td>30</td>
</tr>
<tr class="small">
<td colspan="3" style="border: none;"></td>
<td>Net Amont</td>
<td>1030</td>
</tr>
</tbody>
</table>
```
**receivecomponent.ts**
```data:any;
ngOnInit(): void {
// To get data from biling component
this.route.queryParams.subscribe((params)=>{
this.data = JSON.parse(params.data);
console.log(params);
})
}```
**Any one is there to help, May be this one is complex**
try using sharedService between components.
here is an example of 'Component Intercommunication' through services:
https://stackblitz.com/edit/angular-communication-3?file=app%2Fside-bar%2Fside-bar.service.ts
For more information resd this article '3 ways to communicate between Angular components'
I have tried running the code below to no success please someone kindly help I cant see any error but its not sorting the Columns tried varies ways and did not work.
<table >
<thead>
<tr>
<th class="textalignleft" >Name</Name
</th>
<th class="textalignleft" ng-repeat="col in selcolumns" ng-class="selectedCls(col)" ng-click="changeSorting(col)" >{{selcolumns[$index]}}
</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="person in ItemsByPage[currentPage] | orderBy:columnToOrder:reverse" data-ng-class-odd="'odd'" data-ng-class-even="'even'">
<td>
{{person.FirstName}} {{person.LastName}}
</td>
<td ng-repeat="col in selcolumns">
<span ng-switch on =col>
<span ng-switch-when="Email">{{person.Email}}</span>
<span ng-switch-when="MobileNumber">{{person.MobileNumber}}</span>
<span ng-switch-when="OfficeName">{{person.Firm}}</span>
<span ng-switch-when="OfficeFaxNumber">{{person.OfficeFaxNumber}}</span>
<span ng-switch-when="Functions"><span ng-repeat="Function in person.Functions"><span ng-if="$index > 0">;</span> {{Function.Function}}</span>
</span>
</span>
</td>
</tr>
<tbody>
</table>
I have a table in which after clicking on a row I want to show new child table just after the row I clicked. I am calling new api on row click so I have to show it in new table just after the row clicked. see the snapshot
After clicking on first row the new table is showing like 1, ABC_1, DEF
Here is code for template
<table md-table class="md-primary md-data-table">
<thead md-head md-order="vm.query.order">
<tr md-row>
<th md-column><span>S. No.</span></th>
<th md-column><span>Project Name</span></th>
<th md-column><span>Deadline</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-click="vm.ShowDetailed($index)" ng-repeat="project in vm.projects | limitTo : vm.query.limit : (vm.query.page-1)*vm.query.limit">
<td md-cell>{{($index+1)+(vm.query.page-1)*vm.query.limit}}</td>
<td md-cell>{{project.fields.project_name}}</td>
<td md-cell>{{project.fields.end_date}}</td>
<table md-table ng-show="vm.detailedShow[$index]">
<thead md-head>
<tr md-row>
<th md-column><span>Project Name</span></th>
<th md-column><span>District</span></th>
<th md-column><span>City</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="site in sites">
<td md-cell>{{site.projectName}}</td>
<td md-cell>{{site.district}}</td>
<td md-cell>{{site.city}}</td>
</tr>
</tbody md-body>
</table>
</tr>
</tbody>
</table>
Here is the functions for show/hide
vm.detailedShow = [];
vm.ShowDetailed = function(index){
vm.detailedShow[index] = !vm.detailedShow[index];
}
The value of vm.detailedShow[$index] is getting true/false on click still I am not able to show the table.
The first thing is you can't insert <table> just like a <tr> or <td>. But you can insert the table inside a <td> tag.
Try the below one.
<table md-table class="md-primary md-data-table">
<thead md-head md-order="vm.query.order">
<tr md-row>
<th md-column><span>S. No.</span></th>
<th md-column><span>Project Name</span></th>
<th md-column><span>Deadline</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-click="vm.ShowDetailed($index)" ng-repeat-start="project in vm.projects | limitTo : vm.query.limit : (vm.query.page-1)*vm.query.limit">
<td md-cell>{{($index+1)+(vm.query.page-1)*vm.query.limit}}</td>
<td md-cell>{{project.fields.project_name}}</td>
<td md-cell>{{project.fields.end_date}}</td>
</tr>
<tr ng-show="vm.detailedShow[$index]" ng-repeat-end>
<td> </td>
<td colspan="2">
<table md-table ng-show="vm.detailedShow[$index]">
<thead md-head>
<tr md-row>
<th md-column><span>Project Name</span></th>
<th md-column><span>District</span></th>
<th md-column><span>City</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="site in sites">
<td md-cell>{{site.projectName}}</td>
<td md-cell>{{site.district}}</td>
<td md-cell>{{site.city}}</td>
</tr>
</tbody md-body>
</table>
</td>
</tr>
</tbody>
</table>
I need one help.I am using Angular.js in my app.I have some list and the contents are coming from the DB.Here I need the list order should be alphabetical.I am explaining my code below.
<thead>
<tr>
<th>Sl. No</th>
<th> Name</th>
<th>User Email</th>
<th>Mobile No</th>
<th>Login Name</th>
<th>Status</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr ng-repeat="user in objHodUserData">
<td>{{$index+1}}</td>
<td>{{user.user_name}}</td>
<td>{{user.email}}</td>
<td>{{user.mob_no}}</td>
<td>{{user.login_name}}</td>
<td ng-if="user.user_status==1">Enable</td>
<td ng-if="user.user_status==0">Disable</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editUserData(user.user_id)" >
</a>
</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-red' value='Delete' ng-click="deleteUserData(user.user_id);" >
</a>
</td>
</tr>
</tbody>
In this case i am adding data according to database descending order.Here I need to add data in alphabetically(e.g.A,B,C....).Please help me to resolve this problem.
You can use Angular's built-in orderBy filter:
<tr ng-repeat="user in objHodUserData | orderBy:'user_name' ">
The very 1st row of EVERY tbody is the row header (contains the column Names). The rest of EVERY tbody succeeding 1st rows are not necessary and wanted to hide them.
Classes used:
toprowHeader = 1st row that holds every column names
recordsRow = holds the other record details
For now it shows like this:
--------------------------------------------
| MessageID | Sender | Message |
--------------------------------------------
| 1 | admin |my admin message |
--------------------------------------------
| MessageID | Sender | Message |
--------------------------------------------
| 2 | sender1 |reply to admin |
Here is the sample structure I wanted to achieve:
--------------------------------------------
| MessageID | Sender | Message |
--------------------------------------------
| 1 | admin |my admin message |
| 2 | sender1 |reply to admin |
Though I have some options to make it easier but the requirement says that every record should be inside a tbody
Here is my Sample Table structure:
<table class="gridtable">
<tbody>
<tr class="toprowHeader" >
<td class="">...</td>
</tr>
<tr class="recordsRow " >
<td class="">...</td>
</tr>
<tr class="recordsRow " >
<td class="">...</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">...</td>
</tr>
<tr class="recordsRow ">
<td class="">...</td>
</tr>
<tr class="recordsRow ">
<td class="">...</td>
</tr>
</tbody>
</table>
Added requirement:
A lot of you questioned the table structure above but the main reason why I placed it inside individual tbody its because I also have a button to be able to move the 1st tbody to the bottom/last of the table.
I use PHP to display records
see output below ,Use this
It Will hide all the toprowHeaders except the first one as per your requirement
$('tr.toprowHeader:gt(0)').hide();
$('table').append($('tbody:eq(0)'));
console.log($('tbody:eq(0)'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="gridtable">
<tbody>
<tr class="toprowHeader" >
<td class="">title 1</td>
</tr>
<tr class="recordsRow " >
<td class="">record1</td>
</tr>
<tr class="recordsRow " >
<td class="">record1</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title2</td>
</tr>
<tr class="recordsRow ">
<td class="">record2</td>
</tr>
<tr class="recordsRow ">
<td class="">record2</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title3</td>
</tr>
<tr class="recordsRow ">
<td class="">record3</td>
</tr>
<tr class="recordsRow ">
<td class="">record3</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title4</td>
</tr>
<tr class="recordsRow ">
<td class="">record4</td>
</tr>
<tr class="recordsRow ">
<td class="">record4</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title5</td>
</tr>
<tr class="recordsRow ">
<td class="">record5</td>
</tr>
<tr class="recordsRow ">
<td class="">record5</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title6</td>
</tr>
<tr class="recordsRow ">
<td class="">record6</td>
</tr>
<tr class="recordsRow ">
<td class="">record6</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title7</td>
</tr>
<tr class="recordsRow ">
<td class="">record7</td>
</tr>
<tr class="recordsRow ">
<td class="">record7</td>
</tr>
</tbody>
</table>
You can use CSS as shown below:
tbody:not(:first-child) .toprowHeader{
display: none;
}
<table class="gridtable">
<tbody>
<tr class="toprowHeader">
<td>Title</td>
</tr>
<tr class="recordsRow ">
<td>Record</td>
</tr>
<tr class="recordsRow ">
<td>Record</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td>Title</td>
</tr>
<tr class="recordsRow ">
<td>Record</td>
</tr>
<tr class="recordsRow ">
<td>Record</td>
</tr>
</tbody>
</table>
By the way, You should really try modifying the script to omit the extra titles instead (whichever generates it), and have a single title row inside <thead>