这是用于自动生成发票的html
和jquery
的代码。在这里,我通过qnty*rate
显示了总金额,但是如果我通过jquery
传递了它,那么我必须编译angular
,因为我知道我必须在执行此操作之前对其进行编译,但是我该如何编译它在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>
您的问题不是很清楚,并且假设您想模仿AngularJS(动态添加产品行),这是一个可以做到这一点的示例。
通过迭代products
阵列迭代使用NG重复。
<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>
动态地将对象添加到products
数组。
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});
};
}
);