Click to Edit with AngularJS

Example 1

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>

CSS

table{
  margin-top:10px;
}
td{
  border:1px solid;
  padding:2px 5px;
}

JavaScript

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"}]
	});