根据序列列使用json + template添加动态表行
我有：一个用json数组填充的angularjs表。
我要：当我单击上箭头或下箭头按钮在行上方添加一行时，添加一行行或行下方。
请注意我的输出图片：
查看第二列中的向上箭头；按钮附在表格的每一行中，这些按钮的功能应类似于：
向上箭头：在当前行上方添加一个带有模板的新行
向下箭头：在当前行下方添加一个带有模板的新行。
请注意我到目前为止所做的尝试：
AngularJS
$scope.addLag = function( direction, ld ) {
//$scope.prgOb.stops
$scope.ts = {};
$scope.ts["@type"] = "TS";
$scope.ts.sequence = 0;
$scope.ts.stopType = null;
$scope.ts.actualArrival = null;
$scope.ts.actualDeparture = null;
$scope.ts.orderno = null;
$scope.ts.template=
"<tr>" +
" <td colspan='6'> new template </td>>" +
"</tr>";
switch( direction ) {
case "up":
$scope.insertAbove($scope.ts, ld ); break;
case "down":
$scope.insertBelow($scope.ts, ld ); break;
default:
console.log( "default: inserting lag..." );
}
function insertAbove（）
$scope.insertAbove = function( ts, ld ) {
ts.sequence = ld.sequence;
for( var i=0; i<$scope.prgOb.stops.length; i++ ) {
if(ts.sequence == ld.sequence)
$scope.prgOb.stops[i].sequence +=1;
}
$scope.prgOb.stops.push( ts );
for( var i=0; i<$scope.prgOb.stops.length; i++ ) {
console.log( "sequence: " + $scope.prgOb.stops[i].sequence );
}
console.log( "totals: " + $scope.prgOb.stops.length );
}
function insertBelow（）
$scope.insertBelow = function( ts, ld ) {
ts.sequence = ld.sequence;
ts.sequence += 1;
//ld.sequence -= 1;
$scope.prgOb.stops.push( ts );
for( var i=0; i<$scope.prgOb.stops.length; i++ ) {
console.log( "sequence: " + $scope.prgOb.stops[i].sequence );
}
console.log( "totals: " + $scope.prgOb.stops.length );
}
表
<table class="table table-condensed table-bordered table-hover table-sm" id="tripStopsTable">
<thead>
<tr>
<th>
ACTIONS
</th>
<th style="text-align: center;">
LAG
</th>
<th style="width: 10px;"> Seq. </th>
<th colspan="3" style="text-align: center;">
Company
</th>
<th> Driver </th>
<th> Tractor </th>
<th> Trailer </th>
</tr>
</thead>
<tbody ng-repeat="ld in prgOb.stops | orderBy:'sequence'">
<tr ng-init="initChung();" ng-style="{ 'background-color': tripRowColor($index) }">
<td>
<div class="form-inline">
<div class="form-group"><input type="checkbox" ng-model="tripStopToSend" ng-click="prepareSendList( tripStopToSend, ld )"/> Send </div>  
</div>
</td>
<td style="text-align: center;">
<i style="padding: 0px;">
<div class="form-inline" style="padding: 0px;">
<span ng-click="addLag( 'up', ld )" class="form-group" style="padding: 0px;"> <img style="padding-bottom: 2px;" id="lagArrows" src="/matrixclient/app/assets/icons/up-arrow.png" /> </span>
<span ng-click="addLag( 'down', ld )" class="form-group" style="padding: 0px;"> <img style="padding-top: 2px;" id="lagArrows" src="/matrixclient/app/assets/icons/down-arrow.png" /> </span>
</div>
</i>
</td>
<td> {{ld.sequence}} </td>
<td>{{ld.stopType.value}}</td>
<td>{{ld.customer.businessName}}</td>
<td>
<div>
<select id="selectOption" ng-model="tripObject.selected" ng-options="loc as loc.landmark for loc in ld.customer.locations track by id">
<option value="">   </option>
</select>
<i class="fa fa-plus-square" style="color: #283747; padding-top: 5px;" ng-click="showLineItemForm(); showCompanyRadios(); showFilledCompanyForm( ld.customer )"></i>
</div>
</td>
<td>
<select id="selectOption" ng-model="ld.driver" ng-options="option as option.fullName for option in driverDropdownValues track by option.id" >
<option value="" >   </option>
</select>
</td>
<td>
<select id="selectOption" ng-model="ld.tractor" ng-options="option as option.assetNumber + ' - ' + option.make.value for option in tractorDd track by option.id">
<option value="" >   </option>
</select>
</td>
<td>
{{ld.trailer.assetNumber + ' - ' + ld.trailer.make.value}}
</td>
</tr>
</tbody>
</table>
JSON数据：
[
{
"@type":"TS",
"sequence":1,
"stopType":{
"code":"PP",
"value":"Pickup"
},
"scheduledDateTimedApptType":{
"code":"APT",
"value":"Appointment"
},
"scheduledDateTimedDateTime":"05/13/2018 02:00 PM",
"scheduledDateTimedWindow":0,
"dispatchApptType":{
"code":"APT",
"value":"Appointment"
},
"dispatchedDateTime":"05/13/2018 02:00 PM",
"dispatchWindow":0,
"actualArrival":null,
"actualDeparture":null,
"referenceNumber":"773874352",
"instructions":"jakldfjalskdfjalk",
"customer":{
"@type":"FC",
"companyId":2072,
"companyCode":"",
"legalName":"WF36 US PL NW Pasadena Factory",
"dbaName":"",
"formation":{
"code":"C",
"value":"C-Corp"
},
"firstName":null,
"middleName":null,
"lastName":null,
"dob":null,
"registeredAgent":null,
"filingDate":null,
"filingNo":null,
"documentNumber":null,
"ssn":null,
"ein":null,
"internal":false,
"business":{
"code":"CT",
"value":"Customer"
},
"locations":[
{
"id":2073,
"landmark":"10525 Red Bluff Rd",
"type":{
"code":"P",
"value":"Physical"
},
"street1":"10525 Red Bluff Rd",
"street2":null,
"city":"Pasadena",
"state":"TX",
"zip":"77507",
"country":null,
"latitude":null,
"longitude":null,
"contacts":[
{
"id":2134,
"medium":{
"code":"EM",
"value":"Email"
},
"serviceLocator":"pasaden@gmail.com",
"prefered":false,
"action":0
},
{
"id":2136,
"medium":{
"code":"TL",
"value":"Toll Free"
},
"serviceLocator":"324234",
"prefered":false,
"action":0
}
],
"action":0
}
],
"dotunitSeries":null,
"dotNumber":null,
"mcNumber":null,
"billingMethod":null,
"businessName":"WF36 US PL NW Pasadena Factory"
},
"broker":{
"@type":"BR",
"companyId":2056,
"companyCode":"",
"legalName":"Best Dedicated Solutions LLC",
"dbaName":"",
"formation":{
"code":"C",
"value":"C-Corp"
},
"firstName":null,
"middleName":null,
"lastName":null,
"dob":null,
"registeredAgent":null,
"filingDate":null,
"filingNo":null,
"documentNumber":null,
"ssn":null,
"ein":null,
"internal":false,
"business":{
"code":"BR",
"value":"Broker"
},
"locations":[
{
"id":2057,
"landmark":"14048 W Petronella Dr Ste 105",
"type":{
"code":"P",
"value":"Physical"
},
"street1":"14048 W Petronella Dr Ste 105",
"street2":null,
"city":"Libertyville",
"state":"IL",
"zip":"60048",
"country":null,
"latitude":null,
"longitude":null,
"contacts":[
{
"id":2133,
"medium":{
"code":"EM",
"value":"Email"
},
"serviceLocator":"bestDedicated@us.me",
"prefered":false,
"action":0
},
{
"id":2138,
"medium":{
"code":"WB",
"value":"Web"
},
"serviceLocator":"bDed.com",
"prefered":false,
"action":0
},
{
"id":2140,
"medium":{
"code":"MA",
"value":"Main"
},
"serviceLocator":"972-252-6586",
"prefered":false,
"action":0
},
{
"id":2141,
"medium":{
"code":"TL",
"value":"Toll Free"
},
"serviceLocator":"777-525-0000",
"prefered":false,
"action":0
}
],
"action":0
}
],
"mcNumber":"12345",
"dotNumber":"324234",
"billingMethod":"EML",
"dotunitSeries":null,
"businessName":"Best Dedicated Solutions LLC"
},
"orderno":"6750",
"orderStopSeq":1,
"notifyDriver":null,
"messages":null,
"dispatch":null
},
{
"@type":"TS",
"sequence":2,
"stopType":{
"code":"PP",
"value":"Pickup"
},
"scheduledDateTimedApptType":{
"code":"WDO",
"value":"Window"
},
"scheduledDateTimedDateTime":"05/14/2018 08:00 AM",
"scheduledDateTimedWindow":0,
"dispatchApptType":{
"code":"WDO",
"value":"Window"
},
"dispatchedDateTime":"05/14/2018 08:00 AM",
"dispatchWindow":0,
"actualArrival":null,
"actualDeparture":null,
"referenceNumber":"7898989",
"instructions":null,
"customer":{
"@type":"FC",
"companyId":2074,
"companyCode":"",
"legalName":"Church Point Wholesale",
"dbaName":"",
"formation":{
"code":"C",
"value":"C-Corp"
},
"firstName":null,
"middleName":null,
"lastName":null,
"dob":null,
"registeredAgent":null,
"filingDate":null,
"filingNo":null,
"documentNumber":null,
"ssn":null,
"ein":null,
"internal":false,
"business":{
"code":"CT",
"value":"Customer"
},
"locations":[
{
"id":2075,
"landmark":"9684 Church Point Hwy",
"type":{
"code":"P",
"value":"Physical"
},
"street1":"9684 Church Point Hwy",
"street2":null,
"city":"Church Point",
"state":"LA",
"zip":"70525",
"country":null,
"latitude":null,
"longitude":null,
"contacts":[
{
"id":2137,
"medium":{
"code":"EM",
"value":"Email"
},
"serviceLocator":"churchPoint@gmail.com",
"prefered":false,
"action":0
}
],
"action":0
}
],
"dotunitSeries":null,
"dotNumber":null,
"mcNumber":null,
"billingMethod":null,
"businessName":"Church Point Wholesale"
},
"broker":{
"@type":"BR",
"companyId":2056,
"companyCode":"",
"legalName":"Best Dedicated Solutions LLC",
"dbaName":"",
"formation":{
"code":"C",
"value":"C-Corp"
},
"firstName":null,
"middleName":null,
"lastName":null,
"dob":null,
"registeredAgent":null,
"filingDate":null,
"filingNo":null,
"documentNumber":null,
"ssn":null,
"ein":null,
"internal":false,
"business":{
"code":"BR",
"value":"Broker"
},
"locations":[
{
"id":2057,
"landmark":"14048 W Petronella Dr Ste 105",
"type":{
"code":"P",
"value":"Physical"
},
"street1":"14048 W Petronella Dr Ste 105",
"street2":null,
"city":"Libertyville",
"state":"IL",
"zip":"60048",
"country":null,
"latitude":null,
"longitude":null,
"contacts":[
{
"id":2133,
"medium":{
"code":"EM",
"value":"Email"
},
"serviceLocator":"bestDedicated@us.me",
"prefered":false,
"action":0
},
{
"id":2138,
"medium":{
"code":"WB",
"value":"Web"
},
"serviceLocator":"bDed.com",
"prefered":false,
"action":0
},
{
"id":2140,
"medium":{
"code":"MA",
"value":"Main"
},
"serviceLocator":"972-252-6586",
"prefered":false,
"action":0
},
{
"id":2141,
"medium":{
"code":"TL",
"value":"Toll Free"
},
"serviceLocator":"777-525-0000",
"prefered":false,
"action":0
}
],
"action":0
}
],
"mcNumber":"12345",
"dotNumber":"324234",
"billingMethod":"EML",
"dotunitSeries":null,
"businessName":"Best Dedicated Solutions LLC"
},
"orderno":"6750",
"orderStopSeq":2,
"notifyDriver":null,
"messages":null,
"dispatch":null
}
]
再次收听，我想在单击向上箭头按钮时在上方添加新行，并在单击向下箭头按钮时在下方添加新行。请指导我如何添加包括 template ，
的新行
模板：我的意思是一个新的表格行，其中包含用于提货栏的下拉菜单，用于公司名称的文本字段等...
最重要的是，添加新行时，序列也应根据添加的行而更改。
谢谢。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？