Column total in table ng-repeat when filter in angularJS

Question

I am getting column (Course fee) total at the end of the table when we load page first time, If we use filter, then column total is not getting reset. It should work if we use filter for all the columns

<div ng-app="app" ng-controller="myCtlr">
<input type="text" ng-model="search" placeholder="Search">
<table>
<tbody ng-init="total=0"></tbody>
<tr ng-repeat="student in student_data|filter:search|limitTo:'10'">
    <td>{{student.table}}</td>
    <td>{{student.student_id}}</td>
    <td>{{student.name}}</td>       
    <td ng-init="$parent.total = ($parent.total-0) + (student.course_fee-0)">    
     {{student.course_fee}}
    </td>
</tr>
 <tr>
     <td>Total Course fee</td><td>{{total}}</td>
    </tr>
 </table>

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <script>
    var app = angular.module('app', []);
app.controller('myCtlr', function($scope, $http) {
  $scope.student_data = [{
    "student_id": "12508",
    "name": "AKILA",
    "course": "Cancelled",
    "course_fee": "5000",
    "percentage": "0",
    "University": "",
    "partner": "ygen",
    "infocenter": "",
    "father": "",
    "mobile": "343535",
    "sem": "0",
    "table": "noble",
    "total_paid": "2500"
  }, {
    "student_id": "12513",
    "name": "KASTURI.M",
    "course": "NTT-Online",
    "course_fee": "11500",
    "percentage": "17.391304347826",
    "University": "",
    "partner": "",
    "infocenter": "",
    "father": "",
    "mobile": "34333353",
    "sem": "0",
    "table": "noble",
    "total_paid": "2000"
  }, {
    "student_id": "12611",
    "name": "SUDHA S",
    "course": "Cancelled",
    "course_fee": "7000",
    "percentage": "0",
    "University": "",
    "partner": "YGEN",
    "infocenter": "",
    "father": "",
    "mobile": "3353535",
    "sem": "0",
    "table": "noble",
    "total_paid": "8000"
  }, {
    "student_id": "12692",
    "name": "CHRISTOPHER SUNIL",
    "course": "Cancelled",
    "course_fee": "15000",
    "percentage": "0",
    "University": "",
    "partner": "YGEN",
    "infocenter": "",
    "father": "",
    "mobile": "353535",
    "sem": "0",
    "table": "noble",
    "total_paid": "3000"
  }, {
    "student_id": "12693",
    "name": "PREMKUMAR J",
    "course": "Diploma EC",
    "course_fee": "12050",
    "percentage": "8.298755186722",
    "University": "",
    "partner": "YGEN",
    "infocenter": "",
    "father": "JOHN AMARANATH",
    "mobile": "353535",
    "sem": "0",
    "table": "noble",
    "total_paid": "1000"
  }]
});

My JSFiddle code

Not sure if I got your question right. See if this [link](http://stackoverflow.com/questions/15316363/how-to-display-length-of-filtered-ng-repeat-data) is what you want. — anpsmn, Oct 07 '16 at 05:25
We are not clear with what you mean by count. Couldn't see any count variable being used in your code. — Saurabh Tiwari, Oct 07 '16 at 05:46
I need column total for course fee, Same is initialized in 4th column and displaying in 2nd row, U can see my JSFiddle — Gopala Raja Naika, Oct 07 '16 at 07:12

score 1 · Accepted Answer · edited Oct 07 '16 at 09:07

I think this is your requirement, your total number should be changed along with the filtered students.

For filtering all the fields you can use the strict filter, you can filter all the fields using $ parameter.

Here is the code I have for you.

var app = angular.module('app', []);
app.controller('myCtlr', function($scope, $http, filterFilter) {

  $scope.studentdata = function(search) {
    var found = filterFilter($scope.student_data, {
      $: search
    });
    if (search == undefined) {
      var found = $scope.student_data;
    }
    console.log(found)
    var total = 0;
    for (var i = 0; i < found.length; i++) {
      var student = found[i];
      total += parseInt(student.course_fee);
    }
    return total;
  }

  $scope.student_data = [{


    "student_id": "12508",
    "name": "AKILA",
    "course": "Cancelled",
    "course_fee": "5000",
    "percentage": "0",
    "University": "",
    "partner": "ygen",
    "infocenter": "",
    "father": "",
    "mobile": "343535",
    "sem": "0",
    "table": "noble",
    "total_paid": "2500"
  }, {
    "student_id": "12513",
    "name": "KASTURI.M",
    "course": "NTT-Online",
    "course_fee": "11500",
    "percentage": "17.391304347826",
    "University": "",
    "partner": "",
    "infocenter": "",
    "father": "",
    "mobile": "34333353",
    "sem": "0",
    "table": "noble",
    "total_paid": "2000"
  }, {
    "student_id": "12611",
    "name": "SUDHA S",
    "course": "Cancelled",
    "course_fee": "7000",
    "percentage": "0",
    "University": "",
    "partner": "YGEN",
    "infocenter": "",
    "father": "",
    "mobile": "3353535",
    "sem": "0",
    "table": "noble",
    "total_paid": "8000"
  }, {
    "student_id": "12692",
    "name": "CHRISTOPHER SUNIL",
    "course": "Cancelled",
    "course_fee": "15000",
    "percentage": "0",
    "University": "",
    "partner": "YGEN",
    "infocenter": "",
    "father": "",
    "mobile": "353535",
    "sem": "0",
    "table": "noble",
    "total_paid": "3000"
  }, {
    "student_id": "12693",
    "name": "PREMKUMAR J",
    "course": "Diploma EC",
    "course_fee": "12050",
    "percentage": "8.298755186722",
    "University": "",
    "partner": "YGEN",
    "infocenter": "",
    "father": "JOHN AMARANATH",
    "mobile": "353535",
    "sem": "0",
    "table": "noble",
    "total_paid": "1000"
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtlr">
<input type="text" ng-model="search" placeholder="Search" ng-change="total=0">
<table>
<tbody ng-init="total=0"></tbody>

 <tr ng-repeat="student in student_data|filter:search|limitTo:'10'">
  <td>{{student.table}}</td>
  <td>{{student.student_id}}</td>
  <td>{{student.name}}</td>  
    <td>{{student.course_fee}} </td>
 </tr>
  <tr>
  <td colspan="2"></td><td>Total</td><td>{{studentdata(search)}}</td>
  </tr>
</table>
<div>

Please run this code

Here is the Fiddle

Thanks Sravan, I tried but it is working for name filter only not for others, It should work if we filter all column — Gopala Raja Naika, Oct 07 '16 at 06:55

Column total in table ng-repeat when filter in angularJS

1 Answers1