I'm trying to mix a table with angular-ui's accordion but I can't figure out a way to do it.
I'm not a pro, writing directives. I wonder if such a bridge exist. To achieve something like this :
<table class="table table-hover table-condensed" thead>
<thead>
<tr>
<th>{{ data.profile.firstname }}</th>
<th>{{ data.profile.lastname }}</th>
<th>{{ data.profile.email }}</th>
<th>{{ data.profile.company_name }}</th>
<th>{{ data.profile.city }}</th>
</tr>
</thead>
<tbody accordion close-others="true">
<!-- <tr ng-repeat="client in clients" ng-click="goTo('profile/' + client.username);"> -->
<tr ng-repeat="client in clients" accordion-group is-open="client.isOpen">
<accordion-heading>
<td>{{ client.firstname }}</td>
<td>{{ client.lastname }}</td>
<td>{{ client.email }}</td>
<td>{{ client.company_name }}</td>
<td>{{ client.city }}</td>
</accordion-heading>
Accordion Content
</tr>
</tbody>
</table>
Though it's not working :( Is there anyone who succeded to achieve something like this ?
The result I'm looking for is for when I click on a line in the table, it does the same behavior of an accordion.
In my case I made it a bit primitive but maybe that would be a good solution for you as well. Look:
<tbody ng-repeat="person in people | orderBy:predicate:reverse" >
<tr ng-click="isOpen=!isOpen">
<td>{{person.name}}</td>
<td>{{person.job}}</td>
<td>{{person.age}}</td>
<td>{{person.grade}}</td>
</tr>
<tr ng-if="isOpen">
<td>Just an empty line</td>
</tr>
</tbody>
1) You can try div instead of table for main accordion. It works for me.
2) And here is the accordion table example done in JSFiddle below, i hope it will help you. http://jsfiddle.net/Pixic/VGgbq/
Related
I'm using ng-zorro with Angular to show pagination in a table with data from a REST API request.
But when I add the ng-template (#rangeTemplate) to show the request total items, the next and previous buttons of pagination don't work anymore (it brakes the GET request).
<nz-table #searchResultUsersTable
[nzPageIndex]="pageIndex"
[nzPageSize]="pageSize"
[nzShowTotal]="rangeTemplate"
[nzData]="curedUserList"
[nzTotal]="totalUser"
nzShowSizeChanger="true"
[nzPageSizeOptions]="pageSizeOptions"
nzFrontPagination="false"
nzPaginationPosition="bottom"
[nzScroll]="{ y: '500px' }"
(nzQueryParams)="onQueryParamsChange($event)"
[nzNoResult]="emptyTable">
<thead>
<tr>
<th>Auth0 ID</th>
<th nzColumnKey="last_login" [nzSortFn]="true">{{ 'SEARCH.RESULT.COLUMN-LAST-LOGIN' | translate }}</th>
<th nzColumnKey="email" [nzSortFn]="true">{{ 'SEARCH.RESULT.COLUMN-EMAIL' | translate }}</th>
<th>Applications</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of searchResultUsersTable.data">
<td>{{ data.auth0Id }}</td>
<td>{{ data.last_login | date }}</td>
<td>{{ data.email }}</td>
<td>{{ data.app }}</td>
</tr>
</tbody>
<ng-template #rangeTemplate let-range="range" let-total>
{{ range[0] }}-{{ range[1] }} of {{ total }} items
</ng-template>
</nz-table>
Anybody knows how to fix it?
I want to display number of records of AngularJS , sample "1 to 10 of 15 records". Everything is working and I want to apply the page number. I'm using dir-paginate AngularJS , Is there easy way to achieve this? really appreciate your help. Here is my code:
HTML CODE:
<table class="primary-table">
<thead>
<tr>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Contact Number</th>
<th>Address</th>
<th>Position</th>
<th>Status</th>
<th>Date Added</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody class="tbodyrow">
<tr ng-if="members.length==0"><td colspan="11">No Records</td></tr>
<tr ng-if="members.length>0" dir-paginate="member in members|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td>{{ member.username }}</td>
<td>{{ member.first_name }}</td>
<td>{{ member.last_name }}</td>
<td>{{ member.email }}</td>
<td>{{ member.contact }}</td>
<td>{{ member.address }}</td>
<td>{{ member.position }}</td>
<td>{{ member.status }}</td>
<td>{{ member.dateadded }}</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot class="tfootrow">
<tr>
<td colspan="11">
<div class="grid2">
<div><!--number of records info here--></div>
<div>
<dir-pagination-controls max-size="5"
direction-links="true" boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
JS CODE:
angular.module('app', ['angularUtils.directives.dirPagination']);
angular.module('app').controller('AdminController', function($scope, $http){
this.fetch = function(){
$http.get("../Ajax/Administrator/fetch.php").then(function (response) {
$scope.members = response.data;
});
}
});
Since you already know the page size you can use a model variable to assign the value and access the total lentgh of the array using array.length
<h3> 1 to {{ pageSize }} of {{members.length}} records</h3>
DEMO USING PLUNKER
I'm using angular datatable to populate list of users in my application and following this simple Angular Way. All code is working fine except the pagination button click. I gives proper numbering according to data but when i click anyone of them, it does not move to that list of data. I've added its libraries and this is my html code
<table datatable="ng" class="table table-striped table-bordered">
<thead>
<tr>
<th>User Name</th>
<th>First Name</th>
<th>Last Name</th>
<th>Cell No.</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in allUsers">
<td>{{ user.UserName }}</td>
<td>{{ user.FirstName }}</td>
<td>{{ user.LastName }}</td>
<td>{{ user.CellNo }}</td>
<td>{{ user.Email }}</td>
<td><button type="button" ng-click="btnView_Click(user.Id)" class="btn btn-info"><i class="fa fa-edit"></i> View</button></td>
</tr>
</tbody>
</table>
and this is how its showing buttons But nothing happens when I click any of these buttons (e.g Prev, 1,2,...Next)
I don't know how to create a fiddle for this. Can anyone have any guesses what I'm missing? and why this is happening??
I have a navbar on my page that has an input on it that I want to search a view, that should load in index.html after the user types in their search items. I can only figure out how to search with an input if it's in the same page that the table of ng-repeat items is in. Is there a way to search the table outside of the view? I've created a plnkr. It doesn't work. I'm not sure how to make it work. http://plnkr.co/edit/nqChzn5OATNMeSZL7ItJ?p=preview
Here is some of my code:
navbar
<input type="text" class="form-control" placeholder="Search" ng-model="vm.query">
Here is my table where the data displays.
<table ng-if="query" class="table table-hover table-responsive" >
<thead>
<tr>
<th>
({{filteredResults.length}}) Results Found
</th>
</tr>
<tr>
<td>Acc. ID</td>
<td>Acc. Name</td>
<td>Acc Address</td>
<td>City</td>
<td>Zip</td>
<td>Phone</td>
<td>Parent Name</td>
<td>Account Type</td>
<td>Account Status</td>
<td>Credit Term</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in vm.results | filter:query as filteredResults">
<td>{{ result.accountId }}</td>
<td>{{ result.accountName }}</td>
<td>{{ result.address }}</td>
<td>{{ result.city }}</td>
<td>{{ result.state }}</td>
<td>{{ reuslt.zip }}</td>
<td>{{ result.phone }}</td>
<td>{{ result.parentName }}</td>
<td>{{ result.accountType }}</td>
<td>{{ result.accountStatus }}</td>
<td>{{ result.accountStatus }}</td>
</tr>
</tbody>
</table>
Is it possible to do what I want to do?
I've looked at your plunker and I don't believe that your code hasn't initialized angular. I can't see an ng-app tag anywhere in your code.
That a side, you will be able to use any input to filter/search (via. various implementations) so long as the input and table are contained with your ng-app and controller parts of the DOM. Otherwise you won't be able to access it the controller.
Can I suggest that you distill your question down? give the smallest amount of code that demonstrates your problem.
here's a rough outline:
<body ng-app="app" ng-controller="cntrl">
<!-- nav bar -->
<div>
<input ng-model="filterVal"/>
</div>
<!-- table -->
<div>
<table>
<tr ng-repeat="r in data.rows | filter:filterVal">....</tr>
</table>
</div>
</body>
Here's a plunker where the default filter functionality is working: http://plnkr.co/edit/GDJs5xTCpqq48SDFTk67
If you need to have your nav bar outside of your app/controller or in an different controller (etc.) then there are solutions to this.
Assuming you are using ui-route, this is how to use a service to communicate between controllers:
functioning example:
http://plnkr.co/edit/fZZLUvlHO9zUFwQYd1an?p=preview
Eggheads video:
https://egghead.io/lessons/angularjs-sharing-data-between-controllers
I have the following:
<select
data-ng-model="option.selectedValue"
data-ng-options="item.id as item.name for item in option.selects">
</select>
<table>
<thead>
<tr>
<th>Id</th>
<th>City</th>
<th>Street</th>
</tr>
</thead>
<tbody class="grid">
<tr data-ng-repeat="row in grid.data">
<td>{{ row.iD }}</td>
<td>{{ row.city }}</td>
<td>{{ row.street }}</td>
</tr>
</tbody>
</table>
Is there a way for me to change it so the street column becomes visible only if the option.selectedValue is equal to 0
Try this on your {{row.street}} and street lines
<th ng-show='option.selectedValue == 0'>Street</th>
...
<td ng-show='option.selectedValue == 0'>{{row.street}}</td>
or
<th ng-hide="option.selectedValue != 0">Street</th>
...
<td ng-hide='option.selectedValue != 0'>{{row.street}}</td>
it's the same ;)
Use ng-show. You need to hide both header column and the content column.
<th ng-show="option.selectedValue == 0">Street</th>
<td ng-show="option.selectedValue == 0">{{ row.street }}</td>
Demo