Click to Edit with AngularJS

Example 1

by Gopal Raj

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">
<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 colspan="2"></td><td>Total</td><td>{{total}}</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){
		$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"}]
	});