javascript - 在angularJS中过滤时，表ng-repeat中的列总数

当我们第一次加载页面时，我得到了表末尾的列（课程费）总计，如果我们使用过滤器，那么列总计不会被重置。如果我们对所有列使用filter

<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

最佳答案

我认为这是你的要求，你的总人数应该随着筛选的学生而改变。
要筛选所有可以使用strict filter的字段，可以使用$参数筛选所有字段。
这是我给你的密码。

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>

请运行此代码
Here is the Fiddle