AngularJS : Angular 复制追加 $compile 不工作

Question

这是我的 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

的新人

Answer 1

这是一个简单的 table 示例，它是根据 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>

Answer 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>

这是我的 angularjs 控制器函数 createDataTable（字段）{

                    field.GridList = [{}];

                    var appendValue = "";
                    $scope.isread = "";
                    var row = 1;
                    var col = "";
                    try {


                        $http({
                            method: 'POST',
                            url: "DefaultForm.aspx/populaGridView",
                            data: "{'fieldid':" + field.field_id + "}",
                            headers: { 'Content-Type': 'application/json; charset=utf-8' }
                        }).then(function onSuccess(response) {


                            field.GridList = JSON.parse(response.data.d);



                            $scope.Tables = JSON.parse(response.data.d);
                            angular.forEach(field.GridList, function (vals, keys) {


                             
                                
                                if (vals.field_type == "dropdownList") {
                                    $http({
                                        method: 'POST',
                                        url: "DefaultForm.aspx/populaDD",
                                        data: "{'fieldid':" + vals.field_id + "}",
                                        headers: { 'Content-Type': 'application/json; charset=utf-8' }
                                    }).then(function onSuccess(response) {

                                        try {
                                            vals.Newvalue = [];
                                            vals.Newvalue = JSON.parse(response.data.d);


                                        } catch (err) {
                                        }


                                    }, function myError(response) {

                                    });

                                }
                            })


                        }, function myError(response) {
                            alert(response.statusText);

                        });

                    } catch (err) { console.log("new error " + err.message); }


                };

按钮向 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);
              
                }

单击按钮时，它转到第一行而不是第二行。

AngularJS : Angular 复制追加 $compile 不工作

AngularJS : Angular copy append $compile does not working

javascript

jquery

append

angularjs