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 副本:不放在表格的第二行的主要内容,如果未能解决你的问题,请参考以下文章
BI Publisher Report中如何将Ms.Word表格的第一行和第二行保持在一个页面中?