Javascript 附加表的Angularjs问题

我正在学习Angularjs（我还很新鲜）。我试图通过单击按钮向表中添加一行。我基于本教程中的代码-

我的代码附加了内容，但它省略了和标记，它正在添加标记。此外，我尝试只添加一个简单的字符串，如“test”，它会向字符串添加标记…为什么它会添加我没有包含的标记

我的html-

      <div ng-controller="growingTable">
        <div ng-controller="incomeController">
          <table class="table table-striped">
            <tr>
              <td>Account</td>
              <td>Budget</td>
              <td>%</td>
              <td>Enter Amount</td>
              <td>Total</td>
              <td>%</td>
            </tr>
            <tr>
              <tr ng-repeat="r in rows">
                <td><input class="form-control" placeholder="Account" ng-model="r.account"></td>
                <td><input class="form-control" ng-model="r.funding.startingEstimate"y placeholder="Budgeted"></td>
                <td class="warning">20%</td>
                <td>{{funding.needed}}</td>
                <td class="warning">$500</td>
                <td class="warning">50%</td>
              </tr>
            </table>
            <button class="btn btn-primary"ng-click="addField()">ADD FIELD</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

这是在表中的行之后追加的代码。表元素发生了什么变化？为什么要添加跨度标签

<input class="form-control ng-scope" placeholder="Account">
<input class="form-control ng-scope ng-pristine ng-valid" placeholder="Budgeted" ng-model="funding.startingEstimate">
<span class="ng-scope ng-binding">20%$50050%</span>

20%$50050%

---

谢谢

另一种方法是在控制器中创建一个数组，然后重复生成表。这样，您的“addfield”函数只需要在数组上创建一个新元素，Angular将为您更新html

例如，您的html将是：

<div ng-app="app">
<div ng-controller="growingTable">
<table>
    <tr ng-repeat="r in rows">
        <td><input class="form-control" placeholder="Account" ng-model="r.account"></td>
        <td><input class="form-control" ng-model="r.startingEstimate" placeholder="Budgeted"></td>
        <td class="warning">20%</td>
        <td>{{r.needed}}</td>
        <td class="warning">$500</td>
        <td class="warning">50%</td>
     </tr>
</table>

 <button ng-click="addField()">ADD FIELD</button>
        <br>
           {{rows}}
 </div>

---

您会发现一个工作版本

您使用的是什么版本的Angular？有一个修复程序涉及使用带有表元素标记的模板的代码（参见）。但要解决您的问题，请查看升级到新版本是否有效。顺便说一下，在控制器中进行DOM操作通常是不受欢迎的。谢谢。效果很好。你能告诉我为什么我在删除表标签之前要做什么吗？还有…有没有简单的方法让每个字段彼此分开？也就是说，我想在每个单独的字段中进行数据计算……因此，如果它们是重复的，那么每个字段不会进行相同的计算吗？你能告诉我你的计算是什么吗？这可能更容易演示！你能不能不直接在视图中计算？代替{{r.needed}只做{{r.startingEstimate/100}}？是的，但是当我添加另一个字段时，字段中的任何数字都会在每一行重复。

<div ng-app="app">
<div ng-controller="growingTable">
<table>
    <tr ng-repeat="r in rows">
        <td><input class="form-control" placeholder="Account" ng-model="r.account"></td>
        <td><input class="form-control" ng-model="r.startingEstimate" placeholder="Budgeted"></td>
        <td class="warning">20%</td>
        <td>{{r.needed}}</td>
        <td class="warning">$500</td>
        <td class="warning">50%</td>
     </tr>
</table>

 <button ng-click="addField()">ADD FIELD</button>
        <br>
           {{rows}}
 </div>

angular.module('app', []);

angular.module('app').controller('growingTable', function($scope){
$scope.rows = [];

$scope.addField = function(){
    $scope.rows.push({
        account : '',
        startingEstimate : '',
        needed : ''
    });
}

});