javascript - AngularJs 副本:不放在表格的第二行
问题描述
我有一个很难解决的问题,当我使用 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="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>
我的控制器
$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。 不单击图像单击 按钮时的屏幕截图 2. 输出单击的按钮图像 我是初学者 我不知道这里到底要做什么它总是放在第一行而不是第二行。
解决方案
$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 并获取最后一行并直接推送而不需要每个循环。 https://underscorejs.org/#last
推荐阅读
- r - 如何保存防风草模型拟合(来自游侠)?
- sql - 如何返回字符串中所有数字的总和?
- r - 根据存储在另一个数据库中的值为数据库分配新值
- java - 让 WebDriverManager 下载到特定目录
- javascript - 破坏 node_modules 和 package.json 后如何重置我的依赖关系树?
- c# - 控制罗技鼠标的 LED
- r - 在 R 4.0 中安装 daewr 包
- rest - 如何在 WSO2 中将 API Rest url 模板值用于调用模板
- shopify - 检查 Shopify Liquid 中是否不存在 compare_price
- python - 线性回归 K 折不起作用(ValueError: Expected 2D array, got 1D array instead:) - inside a for loop