I have created an application in angularJS using ng-Table, In the application I am using grouping feature of ng-Table, The application is working fine for single table which is shown in a sample as given below
Single Table with grouping in a single Controller
Demo
But the problem is that in my application I am using two tables within a single controller, when i tried to put two tables with grouping feature
I am not getting the table displayed
Can anyone please tell me some solution for this
Two Tables with grouping in a single Controller
Demo
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table="firstTableParams" class="table">
<tbody ng-repeat="group in myData.$groups">
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
<table ng-table="secondTableParams" class="table">
<tbody ng-repeat="group in myAnotherData.$groups">
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
</body>
for first table controller use $data in ng-repeat for both table it will work
$scope.firstTableParams= [];
$scope.data= data;
$scope.firstTableParams= new ngTableParams({
page: 1,
count: 10,
}, {
total: $scope.data.length,
getData: function($defer, params) {
var filters = params.filter();
if (params.settings().$scope == null) {
params.settings().$scope = $scope;
}
var tempDateFilter;
var orderedData = params.sorting() ?
$filter('orderBy')($scope.data, params.orderBy()) :
$scope.data;
if(filters) {
orderedData = $filter('filter')(orderedData, filters);
filters.Date = tempDateFilter;
}
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve($scope.users);
}
})`
for second table controller
$scope.secondTableParams= [];
$scope.data1= data;
$scope.secondTableParams= new ngTableParams({
page: 1,
count: 10,
}, {
total: $scope.data1.length,
getData: function($defer, params) {
var filters = params.filter();
if (params.settings().$scope == null) {
params.settings().$scope = $scope;
}
var tempDateFilter;
var orderedData = params.sorting() ?
$filter('orderBy')($scope.data1, params.orderBy()) :
$scope.data1;
if(filters) {
orderedData = $filter('filter')(orderedData, filters);
filters.Date = tempDateFilter;
}
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve($scope.users);
}
})
iterate over $groups
<tbody ng-repeat="group in $groups">
in second plunk ,it must be like,since you resolving data by defer ,each table process its own data
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table="firstTableParams" class="table">
<tbody ng-repeat="group in $groups"> //changed here
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
<table ng-table="secondTableParams" class="table">
<tbody ng-repeat="group in $groups"> //changed here
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
</body>
Related
Please help me, I'm using 2 JSON feed, need to display array value in one table then add sum row for each column, but I don't know how to call Expense Table and sum it.
Income JSON Table:
nominal_income
Expense JSON Table:
nominal_expense
If you have any example please let me know :D
My HTML:
<table ng-controller="incomeCtrl">
<tr>
<td>Income</td>
<td>Expense</td>
</tr>
<tr ng-repeat="item in incomes" ng-init="$last ? runEvent(item) : null">
<td class="text-left">{{item.nominal_income}}</td>
<td class="text-left">{{item.nominal_expense}}</td> // how to call this?
</tr>
<tr>
<td class="text-left" >{{ income_total | number:2 }}</td>
<td class="text-left" >{{ expense_total | number:2 }}</td> //how to sum this ?
</tr>
</table>
JS Controller:
$scope.runEvent = function(item) {
var income_total = 0;
angular.forEach(item, function(item) {
income_total = income_total -(- incomes.nominal_income)
;})
$scope.income_total = income_total;}
Use a custom function and call the function with key parameter
angular.module("test",[]).controller("testc",function($scope) {
$scope.incomes=[{nominal_income:20,nominal_expense:75.5},{nominal_income:30.00,nominal_expense:14.50},{nominal_income:49.99,nominal_expense:10}]
$scope.average = function(array, key) {
var value= 0,
average;
for (var i = 0; i < array.length; i++) {
value+= array[i][key];
}
return value;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testc">
<table >
<tr>
<td>Income</td>
<td>Expense</td>
</tr>
<tr ng-repeat="item in incomes" ng-init="$last ? runEvent(item) : null">
<td class="text-left">{{item.nominal_income}}</td>
<td class="text-left">{{item.nominal_expense}}</td>
</tr>
<tr>
<td style="color:green" class="text-left" >{{average(incomes,"nominal_income") | number:2 }}
</td>
<td style="color:green" class="text-left" >{{average(incomes,"nominal_expense") | number:2 }}
</td>
</tr>
</table>
</div>
Update: How to join IncomeCtrl and ExpenseCtrl
You can call another controller inside a controller as nested controller. Or you can pass the data from one controller to another controller by using $routScope or $Cookies or $service or $BroadCase etc
<table ng-controller="incomeCtrl">
<tr>
<td>Income</td>
<td>Expense</td>
</tr>
<tr ng-repeat="item in incomes" ng-init="$last ? runEvent(item) : null">
<td class="text-left">{{item.nominal_income}}</td>
<td ng-controller="ExpenseCtrl" class="text-left">{{expenses[$index].nominal_expense}}</td> // may you need $$parent.$index
</tr>
<tr>
<td style="color:green" class="text-left" >{{average(incomes,"nominal_income") | number:2 }}
</td>
<td ng-controller="ExpenseCtrl" style="color:green" class="text-left" >{{average(expenses,"nominal_expense") | number:2 }}
</td>
</tr>
</table>
You can pass a type / column as a parameter to be reduced to get the sum. Here is an example:
var app = angular.module('myApp', []);
app.controller('incomeCtrl', function($scope, incomeService) { // incomeService injected here as a serivce
var inc = incomeService.get_income();
var exp = incomeService.get_expense();
$scope.incomes = [];
/* works if `inc` and `exp` have the same length, merge with caution! */
for (var i = 0; i < inc.length; i++) {
$scope.incomes.push({
"nominal_income": inc[i],
"nominal_expense": exp[i]
})
}
$scope.sum = function(type) {
return $scope.incomes.reduce((x, y) => {
return x + y[type];
}, 0);
}
});
app.factory('incomeService', function() {
var service = {};
var data = {
"income": [2.01, 3.23, 6.56],
"expense": [1.12, 2.34, 5.67]
}
service.get_income = function() {
return data.income;
}
service.get_expense = function() {
return data.expense;
}
service.set_income = function(array) { // populated in incomeCtrl
data.income = array;
}
service.set_expense = function(array) { // populated in expenseCtrl
data.expense = array;
}
return service;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="incomeCtrl">
<table>
<tr>
<td>Income</td>
<td>Expense</td>
</tr>
<tr ng-repeat="item in incomes">
<td class="text-left">{{item.nominal_income}}</td>
<td class="text-left">{{item.nominal_expense}}</td>
</tr>
<tr style="color:red;">
<td class="text-left">{{sum('nominal_income') | number:2}}</td>
<td class="text-left">{{sum('nominal_expense') | number:2}}</td>
</tr>
</table>
</div>
I have a problem with filter in ng-table AngularJS
when I use it, it's work for
{{p.quantite}},
{{p.montant}}, {{p.date | date:'dd/MM/yyyy'}}
but not working for others
{{p.produitEspece.produitFamille.libelle}},
{{p.produitEspece.libelle}},{{p.clientClient.libelle }}
this my code:
show_vente.html
<div class="panel-body">
<h5 class="over-title margin-bottom-15" data-ng-init="displayData()">Liste <span class="text-bold">des ventes</span></h5>
<div>
<table ng-table="tableParams" show-filter="true" class="table table-striped">
<tr ng-repeat="p in $data">
<td title="'Famille'" filter="{ 'famille': 'text' }" > {{p.produitEspece.produitFamille.libelle}} </td>
<td title="'Produit'" filter="{ 'produit': 'text' }" > {{p.produitEspece.libelle}} </td>
<td title="'Quantité'" filter="{ 'quantite': 'text' }" >{{p.quantite}}</td>
<td title="'Montant'" filter="{ 'montant': 'text' }" >{{p.montant}}</td>
<td title="'Client'" filter="{ 'client': 'text' }" >{{p.clientClient.libelle }}</td>
<td title="'Date'" filter="{ 'date': 'text' }">{{p.date | date:'dd/MM/yyyy'}}</td>
</tr>
</table>
</div>
</div>
venteController.js
var tableData = [];
$scope.filter = {
key: undefined,
failed: undefined
};
$scope.tableParams = new ngTableParams({
page: 1,
count: 25,
},{
dataset: tableData,
total:tableData.length,
getData : function($defer,params){
$http.get(prod.url+'/vente/all').then(function(response) {
tableData = response.data;
tableData = params.filter() ? $filter('filter')(tableData, params.filter()) : tableData;
$defer.resolve(tableData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
params.total(tableData.length);
});
}
})
also sorting work just for "montant" and "quantite" and not working for others
help please
thanks in advance
Update
I found the solution of my problem, I did create my own filter:
filter="{ 'client': 'clienttext' }"
...
<script type="text/ng-template" id="ng-table/filters/clienttext.html">
<input type="text" name="filter-clienttext" ng-model="params.filter().clientClient.libelle" class="input-filter form-control"/>
</script>
thanks :)
Based in this example I need to sum the ages of the filtered users. It means, if I have three names filtered, the filter in the controller must to sum only these the ages.
html
<div data-ng-app="app" data-ng-controller="controller">
<input type="text" data-ng-model="parameter" placeholder="search">
<p/>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
</tr>
<thead>
<tbody>
<tr data-ng-repeat="user in users | filter: parameter">
<td>{{$index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total ages</td>
<td>{{users | sumByKey: 'age'}}</td>
</tr>
</tfoot>
</table>
</div>
angularjs
var app = angular.module("app", []);
app.filter('sumByKey', function() {
return function(data, key) {
if (typeof(data) === 'undefined' || typeof(key) === 'undefined') {
return 0;
}
var sum = 0;
for (var i = data.length - 1; i >= 0; i--) {
sum += parseInt(data[i][key]);
}
return sum;
};
});
Any idea?
You could store the filtered data in a filteredList and pass it for the calculation,
<tbody>
<tr data-ng-repeat="user in (filteredList = (users | filter: parameter))">
<td>{{$index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total ages</td>
<td>{{filteredList | sumByKey: 'age' }}</td>
</tr>
</tfoot>
DEMO
I try to create a dynamic invoice, i have quantity and price column, and then i get total Value Of Products, so when i change value of quantity, price and total value should be changed, i find a way to change price but total value does not work:
<div class="container" ng-controller="OrderController" ng-init="quantity=1">
<div id="order-detail-content" class=" row">
<table id="cart_summary">
<thead>
<tr>
<th>Total</th>
<th> </th>
<th>Qty</th>
<th>Unit price</th>
<th>Availability</th>
<th>Description</th>
<th>Product</th>
</tr>
</thead>
<tfoot>
<tr class="cart_total_price">
<td colspan="2" class="price" id="total_product">{{totalValueOfProducts}}</td>
<td colspan="3" class="text-right">Total</td>
<td rowspan="4" colspan="3" id="cart_voucher" class="cart_voucher"></td>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="order in Orders track by $index" >
<td class="cart_total" data-title="Total">
<span class="price" id="total_product_price_3_13_0">
{{order.Price * quantity}}
</span>
</td>
<td >
<input size="2" ng-model="quantity" type="text" value="1" name="quantity_3_13_0_0">
</td>
<td>
<ul class="price text-right" id="product_price_3_13_0">
<li ng-model="order.Price" class="price"> {{order.Price}}</li>
</ul>
</td>
<td class="cart_description">
<p style="color:black" class="product-name">{{order.ProductName}}</p>
<hr />
<small style="color:black" class="cart_ref">{{order.ProductDescription}}</small>
</td>
<td class="cart_product">
<img ng-src="" alt="Printed Dress" width="98" height="98">
</td>
</tr>
</tbody>
</table>
</div> <!-- end order-detail-content -->
and in controller i define $watch on quantity :
<script>
app.controller('OrderController', function ($scope, $http) {
$scope.Orders = {};
$scope.GetOrders = function () {
$http.get('/Order/GetAllOrders').success(function (response) {
$scope.Orders = response;
//debugger;
GetTotalValueOfProducts(response);
});
}
$scope.GetOrders();
GetTotalValueOfProducts = function (response) {
//debugger;
$scope.totalValueOfProducts = 0;
for (var i = 0; i < response.length; i++) {
$scope.totalValueOfProducts += response[i].Price * $scope.quantity;
}
}
$scope.$watch('quantity', function () {
debugger;
$scope.GetOrders();
});
});
</script>
when i changed value of quantity, the value of totalValueOfProducts was not changed!why $watch did not work? what is the problem?
'quantity' needs to be in the $scope for the binding to take place
on a separate note, it would be better to move all data (orders, quantity etc) into a service, it would better adhere to angular's MVC paradigm
I have an ng-table in my project. My problem is that no pager displays. The table loads multiple rows and I paged from 10 to 10, I assign value 10 to count, but nothing happens.
This is my code:
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
filter: {
message: ''
},
sorting: {
asset: 'asc'
}
},
{
total: $scope.data.length,
counts: [],
getData: function ($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')($scope.data, params.orderBy()) :
$scope.data;
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
<table ng-table="tableParams" class="table table-striped table-hover table-bordered">
<tr ng-repeat="ws in data | filter:search" style="text-align:center;">
<td data-title="'Tag Name'" sortable="'tagname'">{{ws.tagname}}</td>
<td data-title="'Description'" sortable="'tagname'">{{ws.tagdescription}}</td>
<td data-title="'Data Type'" sortable="'datatype'">{{ws.datatype}}</td>
<td data-title="'Tag Unit'" sortable="'tagdescription'">{{ws.tagunit}}</td>
<td data-title="'Birth Date'" sortable="'birthdate'">{{ws.birthdate | date:'yyyy-MM-dd h:mm:ss'}}</td>
<td data-title="'Last Date'" sortable="'lastdate'">{{ws.lastdate | date:'yyyy-MM-dd h:mm:ss'}}</td>
<td data-title="'Last Value'" sortable="'lastvalue'">{{ws.lastvalue}}</td>
</tr>
</table>
Try repeating over $data instead of data in your table:
<table ng-table="tableParams" class="table table-striped table-hover table-bordered">
<tr ng-repeat="ws in $data | filter:search" style="text-align:center;">
<td data-title="'Tag Name'" sortable="'tagname'">{{ws.tagname}}</td>
<td data-title="'Description'" sortable="'tagname'">{{ws.tagdescription}}</td>
<td data-title="'Data Type'" sortable="'datatype'">{{ws.datatype}}</td>
<td data-title="'Tag Unit'" sortable="'tagdescription'">{{ws.tagunit}}</td>
<td data-title="'Birth Date'" sortable="'birthdate'">{{ws.birthdate | date:'yyyy-MM-dd h:mm:ss'}}</td>
<td data-title="'Last Date'" sortable="'lastdate'">{{ws.lastdate | date:'yyyy-MM-dd h:mm:ss'}}</td>
<td data-title="'Last Value'" sortable="'lastvalue'">{{ws.lastvalue}}</td>
</tr>
</table>
$data is used internally by ngTable to handle pagination among other things.