AngularJs 副本:不放在表格的第二行

Posted

技术标签:

【中文标题】AngularJs 副本:不放在表格的第二行【英文标题】:AngularJs copy : does not placed in the second row in table 【发布时间】:2021-08-22 16:17:56 【问题描述】:

我有一个很难解决的问题,当我使用 angularJS 单击按钮时,我不知道如何添加到第二行,它总是在第一行,对不起我的英语。

这是我的模板

     <div class="col-md-6" style="padding: 0px" ng-if="populateForm">
               
                    <div id="divGrid" class="dv well" ng-repeat="form in populateForm" ng-if="form.field_type == 'gridview'">

                        <div class="row clearfix">     
                          <div class="col-md-9"></div>
                          <div class="col-md-3" >
                               <button type="button"  ng-click="AddRow(form)" data="form.field_id"  id="AddBtnform.field_id" class="btn btn-success float-right btnCus"  >+</button>
                               <a  ng-click="removeRow($event)" id="RemBtnform.field_id" data="form.field_id" class="btn btn-warning float-right btnCus" ng-disabled="BtnDisable">-</a>
                          </div>
                            <div class="col-md-12 table-responsive " style="padding: 0 3px;" id="parentform.field_id" >
                                <table class="table table-bordered"  border="" cellpadding="" cellspacing="" style="background-color:white" id="parentform.field_id">
                                <thead>
                                  <tr >
                                   <th ng-repeat="gridDColumn in form.GridList">gridDColumn.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="subgridData.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="subgridData.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="subgridData.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="subgridData.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>
                                        <div ng-if="gridData.field_type == 'Textbox' && gridData.field_datatype == 'Numbers'">
                                           <div ng-if="gridData.field_required == 'True'">
                                               <div class="control-group has-feedback">
                                                <div class="Textbox">
                                               <input id="subgridData.field_id " name="textinput"  ng-model="gridData.value"  placeholder="numbers" type="text"   class="col-md-5 rectangle form-control numbersonly"/>
                                               </div>
                                               </div>
                                           </div>
                                               <div ng-if="gridData.field_required == 'False'">
                                               <div class="control-group">
                                                <div class="Textbox">
                                               <input id="subgridData.field_id " name="textinput"  ng-model="gridData.value"   placeholder="numbers" type="text"   class="col-md-5 rectangle form-control numbersonly"/>
                                               </div>
                                               </div>
                                           </div>
                                            </div>
                                             <div ng-if="gridData.field_type == 'Textbox' && gridData.field_datatype == 'Date'">
                                              <div ng-if="gridData.field_required == 'True'">
                                               <div class="control-group has-feedback">
                                                <div class="Textbox">
                                               <input id="subgridData.field_id " name="textinput"  ng-model="gridData.value"  placeholder="numbers" type="text"  datepicker-popup='dd/MM/yyyy' datepicker-options='dateOptions' is-open='openedGrid'  class="col-md-5 rectangle form-control"/>
                                               </div>
                                               </div>
                                           </div>
                                               <div ng-if="gridData.field_required == 'False'">
                                               <div class="control-group">
                                                <div class="Textbox">
                                               <input id="subgridData.field_id " name="textinput"  ng-model="gridData.value"   placeholder="numbers" type="text"  datepicker-popup='dd/MM/yyyy' datepicker-options='dateOptions' is-open='openedGrid'  class="col-md-5 rectangle form-control"/>
                                               </div>
                                               </div>
                                           </div>
                                            </div>
                                              <div ng-if="gridData.field_type == 'dropdownList'">
                                          
                                              <div ng-if="gridData.field_required == 'True'">
                                               <div class="control-group has-feedback">
                                                <div class="dropdownList">                                           
                                                 <div  >
                                               <select id="subgridData.field_id " ng-model="gridData.value"  class="form-control"  ng-required="true" >
                                                 <option value="" >(Select)</option>
                                              <option ng-repeat="dd in gridData.Newvalue" ng-value="dd.dd_value">
                                             dd.dd_text
                                               </option>
                                           </select>
                                                 </div>             
                                               </div>
                                             </div>
                                           </div>
                                               <div ng-if="gridData.field_required == 'False'">
                                               <div class="control-group">
                                                <div class="dropdownList">
                                                 <div >
                                                    <select id="subgridData.field_id " ng-model="gridData.value"  class="form-control">
                                                    <option value="" >(Select)</option>
                                        <option ng-repeat="dd in gridData.Newvalue" ng-value="dd.dd_value">
                                        dd.dd_text
                                        </option>
                                     </select>
                                                 </div>
                                             
                                               </div>
                                               </div>
                                           </div>
                                            </div>
                                              <div ng-if="gridData.field_type == 'Checkbox'">
                                               <div class="Checkbox">
                                               <label id="subgridData.field_id  checkbox" style="font-weight:lighter;" >
                                               <label style="margin-left:-20px;display:none;"> gridData.field_desc</label>
                                                </br><input id="gridData.field_id " type='checkbox' class=" gridData.field_required "> 
                                               </label>
                                               </div>
                                               </div>
                                          </td>
                                      </tr>

                                  
                                   </tbody>
                                </table>
                            </div>
                        </div>                              
                     </div>   
                                     
                    </div>

我的控制器

     $scope.AddRow = function (obj) 

                    var se = obj.GridList;
                    var appendValue = "";
                    $scope.counter = 0;
                    angular.forEach(se, function (vals) 

                        var _dat = angular.copy(vals);

                        console.log(vals);


                        se.push(_dat);
                    )
                    

未点击按钮复制时的示例截图1。 not click image 单击按钮时的屏幕截图 2。 output clicked button image 我是初学者,我不知道这里到底要做什么,它总是放在第一行而不是第二行。

【问题讨论】:

【参考方案1】:
$scope.AddRow = function (obj) 
    var gridData = obj.GridList;
    var appendValue = "";
    $scope.counter = 0;
    var last_row = _.last(gridData);
    console.log(last_row);
    if (last_row) 
        gridData.push(last_row);
     else 
        gridData.push(
            title: null,
            name: null,
        );
    

使用 Underscorejs 并获取最后一行并直接推送而无需 for each 循环。 https://underscorejs.org/#last

【讨论】:

是的,它对我有用,但这里的问题是,当单击按钮时,他们转到“第一行检查上面的图像”而不是表的第二行。 你是否在 td 中添加 ng-repeat 并在 tr 中添加,所以这不会发生。 替换 并检查

以上是关于AngularJs 副本:不放在表格的第二行的主要内容,如果未能解决你的问题,请参考以下文章

怎样把EXCEL表格的第一行和第二行锁定?让它们不动。

如何用第二行扩展表格的第一行?

BI Publisher Report中如何将Ms.Word表格的第一行和第二行保持在一个页面中?

表格里的第一行怎么固定

html里如何用表格实现两行两列、第一行的第二列和第二行的第二列是合并的。也就说浏览器里看到的效果是

Jquery从表的第二行选择data-id