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??
From a Rest Api I am getting the following:
{
"headers": ["h1", "h2"],
"body": [{"h1": "a1", "h2":"a2"},
{"h1": "b1", "h2":"b2"},
... ]
}
Now I would like to transform this one into an (orderable table) with angular. I tried:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="header in data.headers">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="line in data.body">
<td ng-repeat="(key, val) in line">{{ val | date : "dd.MM.yy" }}</td>
</tr>
</tbody>
</table>
Of course it does not work, as objects do not have a key order in javascript.
Is there a simple way to sort the line by headers?
You can do this very simple:
<tr ng-repeat="line in data.body">
<td ng-repeat="header in data.headers">{{ line[header] | date : "dd.MM.yy" }}</td>
</tr>
Here , i wanna retrieve my subdocument array data from nested JSON object using Angular ng-repeat
this is my JSON nested object:
[
{
_id: "5693bc169f5d75301ff5999d",
booking:
[
{
can_name: "Kinley",
can_quantity: "5",
can_cost: "200",
delivery_date: "12-01-2016",
delivery_timeslot: "3pm-8pm",
order_id: "18214",
address: "140,Bajanai koil street, Melmanagar,Poonamallee,Chennai",
_id: "5694926fd6227ee408b9d051",
ordered_at: "2016-01-12T05:43:11.076Z",
status: "UnderProcess"
}
]
},
{
_id: "5693baf07fe08c6012034b13",
booking:
[
{
can_name: "Kinley",
can_quantity: "4",
can_cost: "160",
delivery_date: "12-01-2016",
delivery_timeslot: "3pm-8pm",
order_id: "14426",
address: "154,Pilliayar koil street,Poonamallee,Chennai",
_id: "569491fad6227ee408b9d04f",
ordered_at: "2016-01-12T05:41:14.531Z",
status: "UnderProcess"
},
{
can_name: "Bisleri",
can_quantity: "5",
can_cost: "250",
delivery_date: "12-01-2016",
delivery_timeslot: "3pm-8pm",
order_id: "11391",
address: "154,Pilliayar koil street,Poonamallee,Chennai",
_id: "5694923ad6227ee408b9d050",
ordered_at: "2016-01-12T05:42:18.900Z",
status: "UnderProcess"
}
]
}
]
Angular Controller Code:
$http.get('/auth/booking-date/' + id).success(function(response){
$scope.todaylist = response;
console.log(response);
$scope.today = '';
});
Here, how can i use ng-repeat to retrieve every subdocument data.
this is what am tried, but am not able get every data:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Address</th>
<th>Can Name</th>
<th>Can Quantity</th>
<th>Can Cost</th>
<th>Timeslot</th>
<th>Delivery Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="today in todaylist">
<td>{{today._id}}</td>
<td>{{today.booking[0].address}}</td>
<td>{{today.booking[0].can_name}}</td>
<td>{{today.booking[0].can_quantity}}</td>
<td>{{today.booking[0].can_cost}}</td>
<td>{{today.booking[0].delivery_timeslot}}</td>
<td>{{today.booking[0].delivery_date | date:'dd-MM-yyyy'}}</td>
</tr>
</tbody>
</table>
</div>
Help will be appreciated...
See above i posted my JSON data instead of Link
I am not sure but check if this solves your problem:
<tr ng-repeat="today in todaylist">
<div ng-repeat="bookingObj in today.booking">
<td>{{today._id}}</td>
<td>{{bookingObj.address}}</td>
<td>{{bookingObj.can_name}}</td>
<td>{{bookingObj.can_quantity}}</td>
<td>{{bookingObj.can_cost}}</td>
<td>{{bookingObj.delivery_timeslot}}</td>
<td>{{bookingObj.delivery_date | date:'dd-MM-yyyy'}}</td>
</div>
</tr>
I am just applying my logic directly here. Try this:
<tbody ng-repeat="today in todaylist">
<tr ng-repeat="bookingObj in today.booking">
<td>{{today._id}}</td>
<td>{{bookingObj.address}}</td>
<td>{{bookingObj.can_name}}</td>
<td>{{bookingObj.can_quantity}}</td>
<td>{{bookingObj.can_cost}}</td>
<td>{{bookingObj.delivery_timeslot}}</td>
<td>{{bookingObj.delivery_date | date:'dd-MM-yyyy'}}</td>
</tr>
</tbody>
Also, try removing this line, I guess it because this line will replace current content of today, and hence no data will be displayed:
$scope.today = '';
Just use the below code
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Address</th>
<th>Can Name</th>
<th>Can Quantity</th>
<th>Can Cost</th>
<th>Timeslot</th>
<th>Delivery Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="today in todaylist">
<div ng-repeat="booking in today.booking">
<td>{{today._id}}</td>
<td>{{booking.address}}</td>
<td>{{booking.can_name}}</td>
<td>{{booking.can_quantity}}</td>
<td>{{booking.can_cost}}</td>
<td>{{booking.delivery_timeslot}}</td>
<td>{{booking.delivery_date | date:'dd-MM-yyyy'}}</td>
</div>
</tr>
</tbody>
</table>
</div>
It looks like your objects are stored in the booking array. To iterate through this array and add a new row on your DOM for each item in your array, I'd suggest the following:
<tbody>
<tr ng-repeat="booking in todaylist.booking">
<td>{{ today._id }}</td>
<td>{{ booking.address }}</td>
<td>{{ booking.can_name }}</td>
<td>{{ booking.can_quantity }}</td>
<td>{{ booking.can_cost }}</td>
<td>{{ booking.delivery_timeslot }}</td>
<td>{{ booking.delivery_date | date:'dd-MM-yyyy' }}</td>
</tr>
</tbody>
For the sake of clarity, you may want to change the variable name of your array from booking to bookings. I find it less confusing to keep the variable names of collections as plural nouns. This makes it easier to easily identify what to expect in your collection.
With that change, you'd have:
<tbody>
<tr ng-repeat="booking in todaylist.bookings">
<td>{{ today._id }}</td>
<td>{{ booking.address }}</td>
<td>{{ booking.can_name }}</td>
<td>{{ booking.can_quantity }}</td>
<td>{{ booking.can_cost }}</td>
<td>{{ booking.delivery_timeslot }}</td>
<td>{{ booking.delivery_date | date:'dd-MM-yyyy' }}</td>
</tr>
</tbody>
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/