change event is not working for me
please could any body help me
after clicking of qty and rate it can display total value
here i put a ng-keyup event
if we enter any values on qty and rate it can automatically display the total value
Please refer code and help me
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script>
var invoice = angular.module('invoice', []);
invoice.controller('InvoiceController', function ($scope) {
$scope.invoice = {
items: [{
name: 'item',
description: 'item description',
qty: 5,
price: 5.5
}]
};
$scope.add = function () {
$scope.invoice.items.push({
name: '',
description: '',
qty: 1,
price: 0
});
},
$scope.remove = function (index) {
$scope.invoice.items.splice(index, 1);
},
$scope.total = function () {
var total = 0;
angular.forEach($scope.invoice.items, function (item) {
total += item.qty * item.price;
})
return total;
}
$scope.AddNumbers = function () {
var a = Number($scope.item.qty || 0);
var b = Number($scope.item.price || 0);
$scope.Total = a * b;
}
});
</script>
</head>
<body>
<div class="container" ng-app="invoice">
<section class="row" ng-controller="InvoiceController">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in invoice.items">
<td><input type="text" ng-model="item.name" class="form-control" /></td>
<td><input type="text" ng-model="item.description" class="form-control" /></td>
<td><input type="number" ng-model="item.qty" class="form-control" ng-keyup="AddNumbers()" /></td>
<td><input type="number" ng-model="item.price" class="form-control" ng-keyup="AddNumbers()" /></td>
<td>{{item.Total}}€</td>
<td><button type="button" class="btn btn-danger" ng-click="remove($index)">Delete</button></td>
</tr>
<tr>
<td><button type="button" class="btn btn-primary" ng-click="add()">Add item</button></td>
<td></td>
<td></td>
<td>Total : </td>
<td>{{total()}} €</td>
</tr>
</tbody>
</table>
</section>
</div>
</body>
</html>