[英]Column total in table ng-repeat when filter in angularJS
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"
}]
});
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.要过滤所有字段,您可以使用
strict filter
,您可以使用$
参数过滤所有字段。
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请运行此代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.