I want to add a pagination after the data that can be displayed has exceeded the filter. I have declared that a limit of 6 data can be displayed at a time. I want to display the rest of the data by adding a pagination under the table. How do I go about doing that?
data.html
<section>
<div>
<table style="width:90%" class="table table-bordered" align="center" ng-controller="RetrieveDiaryController">
<tr>
<th style="width:40%">Date</th>
<th style="width:30%">Type</th>
<th style="width:30%">Level</th>
</tr>
<tr ng-repeat="d in diaries | orderBy:'date':true | limitTo : limit">
<td>{{d.date | date: "dd-MM-yyyy"}}</td>
<td>{{d.taken}}</td>
<td>{{d.level}}</td>
<tr ng-show="limit" ng-click='limit = undefined'>
</tr>
</table>
</div>
</section>
health.js
.controller('RetrieveDiaryController', ['$scope', 'Diary', function ($scope, Diary) {
$scope.diaries = Diary.find();
$scope.limit = 6;
}])
You can use Angular ui bootstrap pagination directive.
And then add ng-show/ng-hide on the pagination depending on number of results per page.
Related
I'm trying to create a table in Angular with a dynamic number of columns and rows. I've found this easy to accomplish using the HTML table element by doing something like this:
<table class="html-table">
<tr class="headers">
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th *ngIf="columns == 4">Species</th>
</tr>
<tr>
<td>Ryan</td>
<td>30</td>
<td>M</td>
<td *ngIf="columns == 4">Human</td>
</tr>
</table>
In this example there might be some button that toggles the value of columns between 3 and 4.
Every explanation I have looked at online involves changing CSS variables, which seems like a somewhat hacky way to accomplish something that should be simple. Is there some way I can specify that something should be a new column in CSS grid rather than that having to specify the number of columns in grid-template-columns?
In Angular you can use ng-repeat to have a dynamic table
A typical example could be
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat="data in datas">
<td title="Title_Of_First_Variable">{{data.variable1}}</td>
<td title="Title_Of_Second_Variable">{{data.variable2}}</td>
<td title="Title_Of_Third_Variable">{{data.variable3}}</td>
...
</tr>
</table>
Of course with your controller you should pass your dynamic data into the correct $scope, in this case should be $scope.datas (usually an object)...maybe something like this, using NodeJS:
$http.post('route_of_your_method')
.success(function (result) {
$scope.datas = result;
})
.error(function (err) {
...
});
I explained fastly but i hope this is enough
I have a Angular Function
vm.OpenBManageContractBillingReport = function () {
reportService.GetContractBillingList(vm.Search).then(function (response) {
console.log(response);
vm.contractBillingReportList = response;
}, function (err) {
});
};
which gives the output of the list from API and the dynamic list is stored in vm.contractBillingReportList. But the Output may be different According to Start Date and End Date Parameter in vm.search. For Ex:- IF start Date Parameter is 1/1/2018 and End Date Parameter is 31/1/2018 the Result Provides Only One Column January 2018. Similarly, IF start Date Parameter is 1/1/2018 and End Date Parameter is 31/12/2019 the Result Provides 24 Col from January 2018 to December 2019. How Can I bind this data with Header Column in HTML Table?
<div class="clearfix">
<div class="reportTable">
<div class="col-sm-12" style="padding:0;">
<table class="table table-bordered">
<thead>
<tr></tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.contractBillingReportListtrack by $index">
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Assuming contractBillingReportList is an array of objects with keys of the object required as header. Just loop for keys in the first element and display those keys as headers.
<tr>
<th ng-repeat="(header, value) in vm.contractBillingReportList[0]">{{header}}</th>
</tr>
In my new project,called "Gold loan management system",I need to fetch the ornaments name from ornament table with the specified GLID.GLID is not unique,So we may have more than one row with same GLID and ornament name.ornament name with weight
Now i want to calculate the number of ornaments after perform ng-if.I used "{{ornamentdata.length}}" Which getting the totalno of ornaments in the ornament table.How can we find the total no of ornaments getting as the result of ng-if ?
index.html
<table class="table table-bordered table-hover">
<tr ng-repeat="ornament in ornamentdata" ng-if="ornament.GLID == cstmrdetails.GLID">
<td>{{$index }}</td>
<td>{{ornament.ORNAMENT}}</td>
<td>{{ornament.WEIGHT}}gm</td>
</tr>
</table >
You can use angular filter instead of ng-if ng-repeat expression allows filtered results to be assigned to a variable. This variable will be accessible from current scope so you can use it to count the number of elements in it.
<body ng-controller="MainCtrl">
<table class="table table-bordered table-hover">
<tr ng-repeat="ornament in (filteredItems = (ornamentdata | filter : {GLID: testid}))" >
<td>{{$index }}</td>
<td>{{ornament.ORNAMENT}}</td>
<td>{{ornament.WEIGHT}}gm</td>
</tr>
</table>
<p>Number of filtered items: {{filteredItems.length}}</p>
</body>
DEMO
first add class to ng-repeat raw and then create another raw and call a function. from that get length of the rows
<table class="table table-bordered table-hover">
<tr ng-repeat="ornament in ornamentdata" ng-if="ornament.GLID == cstmrdetails.GLID" class="row-count">
<td>{{$index }}</td>
<td>{{ornament.ORNAMENT}}</td>
<td>{{ornament.WEIGHT}}gm</td>
</tr>
<tr ng-init="getCount()">
<td> count{{count }}</td>
</tr>
</table >
$scope.getCount = function(){
$timeout(function(){
$scope.count = document.getElementsByClassName('row-count').length;
});
}
Make a filter called filterWithCondition
In Your Html
<table class="table table-bordered table-hover">
<tr ng-repeat="ornament in filteredData = (ornamentdata | filterWithCondition:'GLID':cstmrdetails.GLID)">
<td>{{$index }}</td>
<td>{{ornament.ORNAMENT}}</td>
<td>{{ornament.WEIGHT}}gm</td>
</tr>
Filtered Data Count is {{filteredData.length}}
</table >
The Filter is like below
app.filter('filterWithCondition', function() {
return function(items, itemKey, compareWith) {
var filtered = items.filter(function(item){
return item.itemKey == compareWith
})
return filtered;
}
});
plnkr demo Filter Demo
I have some html code which uses angularjs to show a table. On this table, there is a checkbox on each row.
The table looks like this;
Here is the html code.
<div ng-app ng-controller="CheckCtrl">
<table class="table table-hover data-table sort display" style="width:100%">
<thead>
<tr>
<th class="Serial_">
Serial
</th>
<th class="Name_">
Name
</th>
<th class="ID_">
ID
</th>
<th class="On_off_">
On/off
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in check_items">
<td>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'"></td>
</tbody>
</table>
</div>
Here is my angularjs controller code.
controller('CheckCtrl', ['$scope', '$http', 'configuration',
function ($scope, $http, $configuration) {
var url_api = $configuration.host + "cloe/webroot/cloe-cloud/app/API.json";
$http.get(url_api).success(function(data)
{
$scope.check_items = data;
});
This is what I want. When a user clicks on a checkbox, information regarding all the items on that particular row belonging to the clicked checkbox is sent to a angualrjs controller function for processing. This information should include the Serial, Name, ID and new state of On/Off after clicking on the checkbox.
I am using angularjs v1 and twitter bootstrap.
EDIT: Edited the original question details to indicate that the row information should be sent whenever the checkbox is clicked and not only when the checkbox is enabled.
We can use ng-change to send row data to controller as object.
After that, you can retrieve row data as following:
var serial = row.SERIAL;
var name = row.NAME;
var id = row.ID;
var onOff = row.ON_OFF;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CheckCtrl">
<table class="table table-hover data-table sort display" style="width:100%">
<thead>
<tr>
<th class="Serial_">
Serial
</th>
<th class="Name_">
Name
</th>
<th class="ID_">
ID
</th>
<th class="On_off_">
On/off
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in check_items">
<td>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)"></td>
</tbody>
</table>
</div>
<script>
var app = angular.module('app',[]);
app.controller('CheckCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.check_items =
[
{
SERIAL:'Test Serial',
NAME:'Test Name',
ID : 10,
ON_OFF : '1'
}
];
$scope.rowSelected = function(row)
{
console.log(row);
};
}]);
</script>
You can maybe use something like this,
HTML:
<input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-change="checkSubmit(item.serial,item.name,item.id,item.on_off)">
JS:
function checkSubmit(serial,name,id,on_off){
...
/*Processing can happen now with the parameters obtained*/
...}
NOTE: The case of the variables may be wrong
Some modification to the answer provided by Natiq.
Modify this line
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-model="item.selected" ng-change="rowSelected(item)"></td>
to
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-model="item.selected" ng-click="rowSelected(item)"></td>
The modification is from ng-change to ng-click. This will solve your problem where the first click does not work but only subsequent clicks work based on the comments posted. Using ng-click ensures that every click will be detected.
I am very new to angular JS and zurb,I have a controller which displays remote json data located in http://jsonplaceholder.typicode.com/users, but I want to display the response of the controller in form of tables using zurb.When a user clicks on a row, a reveal modal should pop up and show the specific user’s full details including: address, phone number can someone help me how to do this the code below is my angular controller which I have used, my controller just displays the data but I want to display in form tables using zurb tables and grids.
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="usersController">
<ul>
<li ng-repeat="x in names">
{{ x.id + ', ' + x.name + ', '+ x.username + ', '+ x.email}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('usersController', function($scope, $http) {
$http.get(" http://jsonplaceholder.typicode.com/users")
.success(function (data) {$scope.names = data;});
});
</script>
</body>
</html>
As I understand from their website, Zurb table is nothing but with some stylish look and feel, you can use it like this:
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th >User Name </th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td ng-bind="x.id"></td>
<td ng-bind="x.name"></td>
<td ng-bind="x.username"></td>
<td ng-bind="x.email"></td>
</tr>
</tbody>
</table>