Here is the code of html and jquery that used to generate invoice automatically. here I displayed total amount by qnty*rate but if I passed it by jquery then I have to compile angular because I know I have to compile it before doing this, but how can I compile it in jquery?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<table class="tg">
<tr>
<td class="tg-9hbo">Description of Goods</td>
<td class="tg-9hbo">HSN CODE</td>
<td class="tg-9hbo">QTY</td>
<td class="tg-9hbo">Units</td>
<td class="tg-9hbo">Rate</td>
<td class="tg-9hbo">AMOUNT (INR)</td>
</tr>
<tr class="products" ng-app="">
<td class="tg-yw4l"><input type="text"></td>
<td class="tg-yw4l"><input type="text"></td>
<td class="tg-yw4l"><input type="number" ng-model="qty"></td>
<td class="tg-yw4l"><input type="text"></td>
<td class="tg-yw4l"><input type="number" ng-model="rate"></td>
<td class="tg-yw4l">{{qty * rate}}</td>
</tr>
<tr>
<td class="tg-yw4l">
<button class="addp">Add New Product</button>
</td>
</tr>
<tr>
<td class="tg-yw4l">TAX<br>GST <input type="number">%</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">18%</td>
<td class="tg-yw4l">718.2</td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">GRAND TOTAL</td>
<td class="tg-yw4l">4708</td>
</tr>
</table>
<script>
var tbl = '<tr class="products1" ng-app="">'+
'<td class="tg-yw4l1"><input type="text"></td>'+
'<td class="tg-yw4l1"><input type="text"></td>'+
'<td class="tg-yw4l1"><input type="number" ng-model="qty1"></td>'+
'<td class="tg-yw4l1"><input type="text"></td>'+
'<td class="tg-yw4l1"><input type="number" ng-model="rate1"></td>'+
'<td class="tg-yw4l1">{{qty1 * rate1}}</td>'+
'</tr>';
$(document).ready(function(){
$(".addp").click(function(){
$(".products").after(tbl);
});
});
</script>
Your question is not very clear and assuming you want to mimic similar behavior in angularjs (dynamically add products rows), here's an example on how you can do this.
Render your products using an ng-repeat by iterating over a products array.
<html ng-app="MyApp">
<head>... </head>
<body ng-controller="ProductsController">
<table class="tg">
<tr>...</tr>
<tr class="products" ng-repeat="p in products track by $index">
<td class="tg-yw4l"><input type="text"></td>
<td class="tg-yw4l"><input type="text"></td>
<td class="tg-yw4l"><input type="number" ng-model="p.qty"></td>
<td class="tg-yw4l"><input type="text"></td>
<td class="tg-yw4l"><input type="number" ng-model="p.rate"></td>
<td class="tg-yw4l">{{p.qty * p.rate}}</td>
</tr>
<tr>
<td class="tg-yw4l">
<button class="addp" ng-click="addProduct()">Add New Product</button>
</td>
</tr>
</table>
</body>
</html>
Add objects to products array dynamically.
angular.module('MyApp', []).controller('ProductsController',
function($scope) {
// this array is bound to view
$scope.products= [{qty:0, rate:0}];
// this function is bound to the ng-click event of the button
$scope.addProducts = function() {
$scope.products.push({qty:0, rate:0});
};
}
);