这里是用于自动生成发票的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-repeat 渲染您的产品。
<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});
};
}
);
关于javascript - 如何在 jquery 中附加到 html 之前编译字符串(包含 Angular 目录)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47729378/