angularjs:AngularCopy append$compile不起作用

64jmpszr  于 2021-09-29  发布在  Java
关注(0)|答案(2)|浏览(226)

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

ndasle7k

ndasle7k1#

下面是一个从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>
vnjpjtjt

vnjpjtjt2#

这是我的实际代码

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

                };

按钮将新行添加到表中

$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行。

相关问题