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

Question

当我们第一次加载页面时，我会在表格末尾获取列（课程费用）总计，如果我们使用过滤器，那么列总计不会被重置。如果我们对所有列都使用过滤器，它应该可以工作

<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

我认为这是您的要求，您的总数应该与过滤的学生一起更改。

要过滤您可以使用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