TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Mahesh Reddy
NA
363
16.9k
Change event is not working
Nov 29 2018 6:58 AM
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>
Reply
Answers (
4
)
Meaning of Tier in Three Tier Architecture
How highlight a win forms checkbox when cursor is inside it