AngularJs 副本：没有放在表格的第二行

Question

I have a problem that I'm having a hard time with, I don't know how I can add into second row when I click the button using angularJS it always on the first row, sorry for my english.

Here's my template

     <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="AddBtn{{form.field_id}}" class="btn btn-success float-right btnCus"  >+</button>
                               <a  ng-click="removeRow($event)" id="RemBtn{{form.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="parent{{form.field_id}}" >
                                <table class="table table-bordered"  border="" cellpadding="" cellspacing="" style="background-color:white" id="parent{{form.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="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>
                                        <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="sub{{gridData.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="sub{{gridData.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="sub{{gridData.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="sub{{gridData.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="sub{{gridData.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="sub{{gridData.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="sub{{gridData.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>

My controller

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

Example screenshot 1 when button copy is not click. not click image When button is clicked screenshot 2. output clicked button image I'm beginner I don't know what exactly todo here it always place on the first row not on the second row.

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

Use Underscorejs and get the last row and push directly without for each loop. https://underscorejs.org/#last