Question

如果我使用Dynamic Angular js变量添加行，则它无效。以下是我的代码。请帮我解释一下这个问题

    Also pls note that the inner HTML in my original code is of 600 lines. In this example I have used simple div to simplify.

<div data-ng-init="quantity_r=1;price_r=5">
   <h2>Cost Calculator Quantity:</h2>
   <input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
 <div>
Total in dollar: {{quantity_r * price_r}}
 </div>

<!DOCTYPE html>
<html>
<head> 

</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script>
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
 
});

</script>
  <script>
var app = angular.module('myApp1', []);
app.controller('AppCtrl', function($scope) {
 
 angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
  $scope.a = 1;
  $scope.b = 2;
});
 
});


function replicateRegion() {
         
         var table = document.getElementById("idTable");
           var lastRow = table.rows.length;

           var row = table.insertRow(lastRow);

           var cell1 = row.insertCell(0);
           
         var sHTML =document.getElementById("idTableTD1").innerHTML;
         sHTML=sHTML.replace("_r", "_r" + lastRow.toString());
         sHTML=sHTML.replace("Cost Calculator Quantity:", "Cost Calculator Quantity: Row Added " + lastRow.toString());
            cell1.innerHTML = sHTML;
         
        }

</script>
<div id="id1" ng-app="myApp" ng-controller="AppCtrl">
<button onclick="replicateRegion()">insert Row</button>
<table id="idTable">
<tr><td id="idTableTD1">

  
 <div data-ng-init="quantity_r=1;price_r=5">
   <h2>Cost Calculator Quantity:</h2>
   <input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
 <div>
Total in dollar: {{quantity_r * price_r}}
 </div>
  
 
</td></tr>

</table>

</div> 
</body>

</html>

Only first row which is static has correct output.

单击“插入行”按钮后添加的行有Angular JS输出的问题。请帮忙。

Answer 1

手动添加标记时，例如

document.getElementById('idTableTD1').innerHTML= '<div dynamic></div>'

您绕过了所有AngularJS代码。你应该这样做：

angular.element("#idTableTD1").html('<div dynamic></div>');

可能会有所帮助。

Answer 2

您需要在AngularJS控制器中添加replicateRegion()函数的代码，并使用$compile服务将动态生成的HTML绑定到AngularJS DOM中。

＆＃13;

var myapp = angular.module('myApp', []);

myapp.controller('AppCtrl', function ($compile, $scope) {
 
   
    $scope.a = 1;
    $scope.b = 2;
    $scope.replicateRegion = function(){
      var table = document.getElementById("idTable");
      var lastRow = table.rows.length;

      var row = table.insertRow(lastRow);

      var template = `<div data-ng-init="quantity_r=1;price_r=5">
               <h2>Cost Calculator Quantity:</h2>
               <input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
             <div>
            Total in dollar: {{quantity_r * price_r}}
             </div>
             </div>`;
  
           var cell1 = row.insertCell(0);
         
         template=template.replace(/_r/g, "_r" + lastRow.toString());
         template=template.replace("Cost Calculator Quantity:", "Cost Calculator Quantity: Row Added " + lastRow.toString());
            cell1.innerHTML = template;
          $compile(cell1)($scope); //Now compile it to render the directive.  
    }
        
            
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

 <div id="id1" ng-app="myApp" ng-controller="AppCtrl">
<button ng-click="replicateRegion()">insert Row</button>
<table id="idTable">
<tr><td id="idTableTD1">

  
 <div data-ng-init="quantity_r=1;price_r=5">
   <h2>Cost Calculator Quantity:</h2>
   <input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
 <div>
Total in dollar: {{quantity_r * price_r}}
 </div>
 </div>
  
 
</td></tr>

</table>

</div>

＆＃13;

另请注意var template指定应在点击时动态插入HTML的通用模板。指定静态HTML模板始终是一个好习惯，而不是从页面中提取生成的HTML并使用它来完成。

动态Angular Js不能通过innerHTML工作

2 个答案: