I've got the following model:
function Row(a,b) {
this.a = a;
this.b = b;
this.sum = function () {
return (a+b).toFixed(2);
}
}
A list of Rows is binded to a ngTable and i would like to create a filter for the sum property.
<table ng-table="myTable" show-filter="true" class="table table-responsive table-striped table-condensed text-center">
<tr ng-repeat="row in filteredRows">
<td data-title="'a'" sortable="'a'" filter="{ 'a': 'text' }">
{{row.a}}
</td>
<td data-title="'b'" sortable="'b'" filter="{ 'b': 'text' }">
{{row.b}}
</td>
<td data-title="'sum'" sortable="'sum()'" filter="{ 'sum()': 'text' }">
{{row.sum()}}
</td>
</tr>
</table>
Here is the entire code: https://embed.plnkr.co/VWUdn9an0kTUIFCkJWlj/
To achieve expected result, use below option
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="ng-table.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table ng-table="myTable" show-filter="true" class="table table-responsive table-striped table-condensed text-center">
<tr ng-repeat="row in filteredRows">
<td data-title="'a'" sortable="'a'" filter="{ 'a': 'text' }">
{{row.a}}
</td>
<td data-title="'b'" sortable="'b'" filter="{ 'b': 'text' }">
{{row.b}}
</td>
<td data-title="'c'" sortable="'c'" filter="{'c':'text'}">
{{row.c}}
</td>
</tr>
</table>
</body>
</html>
app.js:
var app = angular.module('plunker', ['ngTable']);
app.controller('MainCtrl', function($scope,ngTableParams, $filter) {
//model
$scope.rows =[];
var x =0;
function Row(a, b) {
this.a = a;
this.b = b;
this.sum = function() {
return (a + b).toFixed(2);
}
$scope.rows[x]= new lineItem(a,b,(a + b).toFixed(2));
x++;
}
function lineItem(a,b,c){
this.a = a;
this.b = b;
this.c =c;
}
$scope.lines = [new Row(1, 2), new Row(2, 3),new Row(4,30)];
console.log($scope.rows);
$scope.myTable = new ngTableParams({
count: $scope.rows
}, {
counts: [], // hides page sizes
total: $scope.rows.length,
getData: function($defer, params) {
//console.log(params);
$scope.filteredRows = params.sorting() ? $filter('orderBy')($scope.rows, params.orderBy()) : $scope.rows;
$scope.filteredRows = params.filter() ? $filter('filter')($scope.rows, params.filter()) : $scope.rows;
params.total($scope.filteredRows.length);
$defer.resolve($scope.filteredRows);
}
});
});