Javascript AngularJS:Angular copy append$compile不起作用

这是我的angularjs控制器

var $tr = angular.element("#parent" + obj.field_id).find("tbody"),

$nlast = $tr.find("tr:last"),

$clone = angular.copy($nlast);

$clone.find(':text').val('');

var elem = angular.element($clone);

$tr.after($compile(elem)($scope));

---

当我尝试删除$compile时，它工作正常，但angularjs与字段验证完全不一样，这就是为什么我需要添加$compile，但它对我来说似乎不起作用，请帮助我，我是angularjs的新手，这里有一个从angularjs中的对象构建的简单表的示例。这不是唯一的方法，但它说明了一些基本概念，以及如何添加另一行

在控制器中

$scope.tabledata = {
  header: [{name: "id"}, {name: "name"}, {name: "email"}],
  rows: [{
      id: 1,
      name: "Joe",
      email: "joe@1.com"
    },
    {
      id: 2,
      name: "Bill",
      email: "bill@1.com"
    },
    {
      id: 3,
      name: "Sally",
      email: "sally@1.com"
    }
  ]
}

// later I want to add another row:

$scope.tabledata.rows.push({
  id: 4,
  name: "Bob",
  email: "bob@1.com"
})

// and like magic, another row is added to the table

查看文件：

<table ng-if="tabledata">
  <tr>
    <th ng-repeat="item in tabledata.header">{{item.name}}</th>
  </tr>
  <tr ng-repeat="row in tabledata.rows">
    <td ng-repeat="(key, value) in row">{{value}}</td>
  </tr>
</table>

{{item.name}
{{value}}

下面是一个从angularJS中的对象构建的简单表的示例。这不是唯一的方法，但它说明了一些基本概念，以及如何添加另一行

在控制器中

$scope.tabledata = {
  header: [{name: "id"}, {name: "name"}, {name: "email"}],
  rows: [{
      id: 1,
      name: "Joe",
      email: "joe@1.com"
    },
    {
      id: 2,
      name: "Bill",
      email: "bill@1.com"
    },
    {
      id: 3,
      name: "Sally",
      email: "sally@1.com"
    }
  ]
}

// later I want to add another row:

$scope.tabledata.rows.push({
  id: 4,
  name: "Bob",
  email: "bob@1.com"
})

// and like magic, another row is added to the table

查看文件：

<table ng-if="tabledata">
  <tr>
    <th ng-repeat="item in tabledata.header">{{item.name}}</th>
  </tr>
  <tr ng-repeat="row in tabledata.rows">
    <td ng-repeat="(key, value) in row">{{value}}</td>
  </tr>
</table>

{{item.name}
{{value}}

这是我的实际代码

         <table class="table table-bordered"  border="" cellpadding="" cellspacing="" style="background-color:white" id="parent{{form.field_id}}">
                                <thead>
                                  <tr >
                                   <th ng-repeat="Col in form.GridList">{{Col.field_title}}</th>
                                  </tr>
                                  </thead>
                                   <tbody>
                                     <tr >   
                                     <td ng-repeat="gridData in form.GridList">
                    
                                    <div ng-if="gridData.field_type == 'Textbox' && gridData.field_datatype == 'Text'">
                                      <div ng-if="gridData.field_required == 'True'">
                                       <div class="control-group has-feedback">
                                          <div class="Textbox">
                                           <div ng-if="gridData.enable_textformat == 'True'">
                                           <input id="sub{{gridData.field_id }}" name="textinput"   ng-model="gridData.value"   placeholder="{{gridData.field_textformat}}" type="text" ng-required="{{gridData.field_required | lowercase}} && {{gridData.field_standard | lowercase}} == true"   class="col-md-5 rectangle form-control"/>
                                           </div>
                                            <div ng-else>
                                           <input id="sub{{gridData.field_id }}" name="textinput"    ng-model="gridData.value"  type="text"  placeholder=""  ng-required="{{gridData.field_required | lowercase}} && {{gridData.field_standard | lowercase}} == true"  class="{{gridData.field_required}} col-md-5 rectangle form-control"/>
                                           </div>
                                          </div>
                                       </div>
                                      </div>
                                      <div ng-if="gridData.field_required == 'False'">                               
                                          <div class="control-group">
                                          <div class="Textbox">
                                             <div ng-if="gridData.enable_textformat == 'True'">
                                                <input id="sub{{gridData.field_id }}" name="textinput"  ng-model="gridData.value"   placeholder="{{gridData.field_textformat}}" type="text"  ng-required="{{gridData.field_required | lowercase}} && {{gridData.field_standard | lowercase}} == false" class="col-md-5 rectangle form-control"/>
                                             </div>
                                               <div ng-else>
                                             <input id="sub{{gridData.field_id }}" name="textinput"      ng-model="gridData.value"  type="text"  placeholder="" ng-required="{{gridData.field_required | lowercase}} && {{gridData.field_standard | lowercase}} == false" class="{{gridData.field_required}} col-md-5 rectangle form-control"/>
                                           </div>
                                          </div>
                                      </div>
                                     </div>
                                    </div>
                                          </td>       
                                   </tr>
                                 
                                  
                                   </tbody>
                                </table>

按钮将新行添加到表中

    $scope.AddRow = function (obj) {

                    var row = { cells: [] },
                    se = obj.GridList,
                     rowLen = se.length; 
                    angular.forEach(se, function (vals) {
                    row.cells.push({ field_type: vals.field_type });
                    })
                    se.push(row);
              
                }

单击按钮后，它将转到第1行，而不是第2行。 这是我的实际代码

         <table class="table table-bordered"  border="" cellpadding="" cellspacing="" style="background-color:white" id="parent{{form.field_id}}">
                                <thead>
                                  <tr >
                                   <th ng-repeat="Col in form.GridList">{{Col.field_title}}</th>
                                  </tr>
                                  </thead>
                                   <tbody>
                                     <tr >   
                                     <td ng-repeat="gridData in form.GridList">
                    
                                    <div ng-if="gridData.field_type == 'Textbox' && gridData.field_datatype == 'Text'">
                                      <div ng-if="gridData.field_required == 'True'">
                                       <div class="control-group has-feedback">
                                          <div class="Textbox">
                                           <div ng-if="gridData.enable_textformat == 'True'">
                                           <input id="sub{{gridData.field_id }}" name="textinput"   ng-model="gridData.value"   placeholder="{{gridData.field_textformat}}" type="text" ng-required="{{gridData.field_required | lowercase}} && {{gridData.field_standard | lowercase}} == true"   class="col-md-5 rectangle form-control"/>
                                           </div>
                                            <div ng-else>
                                           <input id="sub{{gridData.field_id }}" name="textinput"    ng-model="gridData.value"  type="text"  placeholder=""  ng-required="{{gridData.field_required | lowercase}} && {{gridData.field_standard | lowercase}} == true"  class="{{gridData.field_required}} col-md-5 rectangle form-control"/>
                                           </div>
                                          </div>
                                       </div>
                                      </div>
                                      <div ng-if="gridData.field_required == 'False'">                               
                                          <div class="control-group">
                                          <div class="Textbox">
                                             <div ng-if="gridData.enable_textformat == 'True'">
                                                <input id="sub{{gridData.field_id }}" name="textinput"  ng-model="gridData.value"   placeholder="{{gridData.field_textformat}}" type="text"  ng-required="{{gridData.field_required | lowercase}} && {{gridData.field_standard | lowercase}} == false" class="col-md-5 rectangle form-control"/>
                                             </div>
                                               <div ng-else>
                                             <input id="sub{{gridData.field_id }}" name="textinput"      ng-model="gridData.value"  type="text"  placeholder="" ng-required="{{gridData.field_required | lowercase}} && {{gridData.field_standard | lowercase}} == false" class="{{gridData.field_required}} col-md-5 rectangle form-control"/>
                                           </div>
                                          </div>
                                      </div>
                                     </div>
                                    </div>
                                          </td>       
                                   </tr>
                                 
                                  
                                   </tbody>
                                </table>

按钮将新行添加到表中

    $scope.AddRow = function (obj) {

                    var row = { cells: [] },
                    se = obj.GridList,
                     rowLen = se.length; 
                    angular.forEach(se, function (vals) {
                    row.cells.push({ field_type: vals.field_type });
                    })
                    se.push(row);
              
                }

单击按钮后，它将转到第1行，而不是第2行。

---

可能是因为您将Angular和jQuery混合在一起（从标记中）？另外，我想问一下，为什么您目前正在学习一个被弃用了近5年的库（Angular 2于2016年9月推出）？另外，我也不知道为什么要用Angular选择和克隆DOM元素。这绝对不是框架的工作方式。比如，

.find（':text'）.val（''）

在AngularJS/Angular/React/Vue应用程序中，这绝对与此无关这是公司学习AngularJS的要求，我不知道使用AngularJS在表中附加最后一行的正确方法是否正确，不，不是。在angularJS中，您的表将从一个数组或对象构建，若要将另一个TR推送到数组中，我知道这不是您想要的，但我给出了angularJS中构建的表的基本演示，以及如何添加行，可能是因为您将angular和jQuery混合在一起（从标记中）？另外，我想问一下，为什么您目前正在学习一个被弃用了近5年的库（Angular 2于2016年9月推出）？另外，我也不知道为什么要用Angular选择和克隆DOM元素。这绝对不是框架的工作方式。比如，

.find（':text'）.val（''）

在AngularJS/Angular/React/Vue应用程序中，这绝对与此无关这是公司学习AngularJS的要求，我不知道使用AngularJS在表中附加最后一行的正确方法是否正确，不，不是。在angularJS中，您的表将从一个数组或对象构建，要添加另一个TR，您需要将（）推送到您的数组中。我知道这不是您想要的，但我给出了一个在angularJS中构建的表的基本演示，以及如何添加rowwow！这对我帮助很大。顺便说一下，谢谢，我的样品上只有一个问题。tr重复ng，td重复ng。您只在tdI上有它，即使我尝试添加tr ng模式，也会遇到同样的问题我已经遵循您的模式，当我推送新数组时，是否可以在表中添加一个tr标记？我看到

通过对象（数组）进行追加。这不是通过DOM操作实现的，哇！这对我帮助很大。顺便说一下，谢谢，我的样品上只有一个问题。tr重复ng，td重复ng。您只在tdI上有它，即使我尝试添加tr ng模式，也会遇到同样的问题我已经遵循您的模式，当我推送新数组时，是否可以在表中添加一个tr标记？我看到
通过对象（数组）进行追加。这不是通过DOM操作实现的'