Javascript 在jquery中附加到html之前，如何编译字符串（包含angular dir）？_Javascript_Php_Jquery_Html_Angularjs

Javascript 在jquery中附加到html之前，如何编译字符串（包含angular dir）？

javascript php jquery html angularjs

Javascript 在jquery中附加到html之前，如何编译字符串（包含angular dir）？,javascript,php,jquery,html,angularjs,Javascript,Php,Jquery,Html,Angularjs,下面是用于自动生成发票的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.googl

下面是用于自动生成发票的

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>


货物说明
HSN码
数量
单位
速度
金额（印度卢比）
{{数量*比率}
添加新产品
税
商品及服务税%
18%
718.2
总计
4708
变量tbl=''+
''+
''+
''+
''+
''+
“{qty1*rate1}”+
'';
$（文档）.ready（函数（）{
$（“.addp”）。单击（函数（）{
美元（“.products”）。之后（待定）；
});
});

您的问题不是很清楚，假设您想在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>

我不认为在使用angularjs时使用jquery添加元素有什么意义。尝试通过将ng repeat绑定到产品对象数组，使用ng repeat填充产品行。您可以动态地向所述阵列添加新对象，视图将自动呈现。如果我们不知道要提前添加多少产品，我也不知道如何添加，请显示一些代码

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});
       };
   }
);