Currently, the average is being calculated in the HTML code. When a user input is changed, the average breaks. What can be done to update the average for each individual person?
Controller
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
$scope.names = [
{name:'Priya',age:'19',gender:'Female',English:x[0], Hindi:x[1]},
...
...
{name:'Jiah', age:'18', gender:'Female',English:x[18],Hindi:x[19]}
];
$scope.sortColumn ="name";
$scope.$watch('names', function(newVal) {
var total = 0;
angular.forEach(newVal, function(x) {
total += parseInt(x.English) + parseInt(x.Hindi);
});
$scope.total = total
}, true);
$scope.delete = function (name)
{
$scope.names.splice( $scope.names.indexOf(name), 1 );
}
});
HTML This section of code controls where the average should change:
<table>
<th>NAME</th>
<th>AGE</th>
<th>GENDER</th>
<th>ENGLISH/100</th>
<th>HINDI/100</th>
<th>AVERAGE/100</th>
<tr ng-repeat ="x in names | orderBy:sortColumn">
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.gender}}</td>
<td><input type="text" ng-model="x.English"></td>
<td><input type="text" ng-model="x.Hindi"></td>
<td ng-bind="avg=(x.English+x.Hindi)/2">{{avg}}</td>
<td>
<button><a href="" ng-click="delete(x)" style="text-decoration:none;">Delete</a></button>
</td>
</tr>
</table>