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

Answer 1

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