如何管理下表中的命名模型
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何管理下表中的命名模型相关的知识,希望对你有一定的参考价值。
我有下表:Lot Table View
我使用三个ng-repeat来显示以下响应。 Response from backend overview
Detailed response from backend
第一次ng重复是在<tbody>
。第二次ng重复是在<tr>
。第三个是重复批次详情,Trx数量和余额,这是<span>
。
以下是我的html代码:
<table id="lotTable" class="table table-striped table-bordered table-vmiddle">
<thead>
<tr>
<th>S No.</th>
<th>Lot No.</th>
<th>Lot Qty</th>
<th>Unit Cost</th>
<th>Lot Details</th>
<th>Trx Qty</th>
<th>Balance</th>
</tr>
</thead>
<tbody ng-if="isDataLot=='yes'" ng-repeat-start="l in lotData track by $index"
ng-init="parentIndex = $index" id=parentRow{{$index}}
data-id="{{l.lotNo}}">{{$index}}
<tr ng-repeat="k in l track by $index">
<td class="indextrack" >{{$index+1}}
</td>
<td class="lotNo">
<input type="hidden" class="hiddenLotNo" value="{{l.lotNo}}"/>
{{ k.lotNo }} <br>
{{k.grnNo}} ({{k.grnDate}}) <br>
{{k.inPermit}} {{k.physicalLocationName}}
</td>
<td class="lotQty">{{k.lotQty}}
</td>
<td class="cost">{{ k.unitPrice | number:4}}
</td>
<!-- Lot Details -->
<td class="lotDetails" style=" line-height: 28px; ">
<span ng-repeat="c in k.lotDetails">
<input type="hidden" class="hiddenLotDetails m-b-5"
id="lotDetails{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}"
ng-model="xxx[$index]" value="{{c}}"/>
{{c | ctnchange : c}}<br>
{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}
</span>
</td>
<!-- Transaction Quantity -->
<td class="trxQty" style="padding-top: 10px; padding-bottom: 10px;">
<span ng-repeat="c in k.lotDetails track by $index" >
<input class="trxQuantity m-b-5 text-right"
id="trx{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}"
autocomplete="off"
ng-model="trx[$parent.$index][$index]"
ng-keyup="calculateBal($parent.$index,$index); checkParentCheckbox($event);addTrxQty();"
style="width: 60px;" integers-only/><br>
</span>
</td>
<!-- Balance -->
<td class="balanceNew" style="padding-top: 10px; padding-bottom: 10px;">
<span ng-repeat="c in k.lotDetails track by $index">
<input ng-disabled="true" class="balanceNew m-b-5 text-right"
id="balNew{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}"
type="text" style="width: 60px;"/>
<br>
</span>
</td>
</tr>
</tr>
</tbody>
<tbody ng-repeat-end></tbody>
我想动态命名Lot Details,Trx Qty和Balance的模型。我使用id="trx{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}
为交易数量命名了ID。我想为ng-model
实现同样的目标。
我用过ng-model="trx[$parent.$index][$index]
。但我有三个嵌套的ng-repeat。这适用于两个嵌套的ng-repeat。怎样才能进行三次重复?另外,我必须在控制器中设置$scope.trx[i][j]
值。命名模型的正确方法是什么,以便我们也可以在控制器中设置其值?
答案
我将HTML代码更改为:
<table id="lotTable" ng-table="tableSorting" class="table table-striped table-bordered table-vmiddle">
<thead>
<tr>
<th ng-hide="true"></th>
<th>S No.</th>
<th>Lot No.</th>
<th>Lot Qty</th>
<th>Unit Cost</th>
<th>Lot Details</th>
<th>Trx Qty</th>
<th ng-hide="true">Balance</th>
<th>Balance</th>
</tr>
</thead>
<tbody ng-if="isDataLot=='yes'" ng-repeat-start="l in lotData track by $index" ng-init="parentIndex = $index" id=parentRow{{$index}} data-id="{{l.lotNo}}">
<tr ng-repeat="k in l track by $index" ng-init="lotDataChildIndex = $index">
<td header-class="'text-center'" ng-hide="true">
<div class="checkbox">
<label>
<input type="checkbox" class="checkhead" id="lotHiddenCheckbox{{parentIndex}}{{lotDataChildIndex}}">
<em class="input-helper"></em>
</label>
</div>
</td>
<td class="indextrack" >{{$index+1}}
<input type="hidden" class="hiddenalcoholPer" value="{{k.alcoholPer}}" />
<input type="hidden" class="hiddencascCode" value="{{k.cascCode}}" />
<input type="hidden" class="hiddencreditorCode" value="{{k.creditorCode}}" />
<input type="hidden" class="hiddencreditorName" value="{{k.creditorName}}" />
<input type="hidden" class="hiddencustomAmnt" value="{{k.customAmnt}}" />
<input type="hidden" class="hiddenduty" value="{{k.duty}}" />
<input type="hidden" class="hiddendutyPaid" value="{{k.dutyPaid}}" />
<input type="hidden" class="hiddenhsCode" value="{{k.hsCode}}" />
<input type="hidden" class="hiddenidUom" value="{{k.idUom}}" />
<input type="hidden" class="hiddenunitPrice" value="{{k.unitPrice}}" />
<input type="hidden" class="hiddenuomCode" value="{{k.uomCode}}" />
<input type="hidden" class="hiddenidGrnforLot" value="{{k.idGrn}}" />
<input type="hidden" class="hiddenidPhysicalLocation" value="{{k.idPhysicalLocation}}" />
</td>
<td class="lotNo">
<input type="hidden" class="hiddenLotNo" value="{{k.lotNo}}"/>
{{ k.lotNo }} <br>
{{k.grnNo}} ({{k.grnDate}}) <br>
{{k.inPermit}} {{k.physicalLocationName}}
</td>
<td class="lotQty">
<input type="hidden" class="hiddenLotQty" value="{{k.lotQty}}" />{{k.lotQty}}
</td>
<td class="cost"><input type="hidden" class="hiddencost" value="{{k.unitPrice}}" />{{ k.unitPrice | number:4}}
</td>
<td class="lotDetails" style=" line-height: 28px; ">
<span ng-repeat="c in k.lotDetails" ng-init="lotDetailsIndex = $index;">
<input type="hidden" class="hiddenLotDetails m-b-5" id="lotDetails{{parentIndex}}{{lotDataChildIndex}}{{lotDetailsIndex}}" value="{{c}}"/>{{c | ctnchange : c}}<br>
</span>
</td>
<td class="trxQty p-t-10 p-b-10">
<span ng-repeat="c in k.lotDetails track by $index" ng-init="trxQtyIndex = $index;">
<!-- lotDetailsValues Hidden field -->
<input type="hidden" class="lotDetailsValues"
id="lotDetailsValues{{parentIndex}}{{lotDataChildIndex}}{{trxQtyIndex}}"
ng-model="lotDetailsValues[parentIndex + '' + lotDataChildIndex + '' + $index]" ng-init="(lotDetailsValues[parentIndex + '' + lotDataChildIndex + '' + $index]) = k.lotDetailsValues[$index];"
value="{{k.lotDetailsValues[$index]}}" />
<!-- Transaction Quantity -->
<input class="trxQuantity m-b-5 text-right"
id="trx{{parentIndex}}{{lotDataChildIndex}}{{trxQtyIndex}}"
autocomplete="off"
ng-model="trx[parentIndex + '' + lotDataChildIndex + '' + trxQtyIndex]"
ng-keyup="calculateBalanceTxtQty(parentIndex,lotDataChildIndex,trxQtyIndex);
checkParentCheckbox($event,parentIndex,lotDataChildIndex);addTrxQty();"
style="width: 60px;" integers-only/><br>
</span>
</td>
<!-- BALANCE AMOUNT HIDDEN -->
<td class="balance p-t-10 p-b-10" ng-hide="true">
<span ng-repeat="c in k.lotDetails track by $index" ng-init="balanceIndex = $index;">
<input ng-disabled="true"
class="balanceAmt m-b-5"
id="balAmt{{parentIndex}}{{lotDataChildIndex}}{{balanceIndex}}"
type="text"
ng-model="balAmt[parentIndex + '' + lotDataChildIndex + '' + balanceNewIndex]"/><br>
</span>
</td>
<!-- BALANCE NEW AFTER CALCULATION -->
<td class="balanceNew p-t-10 p-b-10">
<span ng-repeat="c in k.lotDetails track by $index" ng-init="balanceNewIndex = $index;">
<input type="text" style="width: 60px;"
ng-model="balNew[parentIndex + '' + lotDataChildIndex + '' + balanceNewIndex]"
ng-disabled="true"
class="balanceNew m-b-5 text-right"
id="balNew{{parentIndex}}{{lotDataChildIndex}}{{balanceNewIndex}}"/>
<br>
</span>
</td>
</tr>
</tbody>
<tbody ng-repeat-end></tbody>
<tbody>
<tr ng-if="isDataLot=='no'" class="no_records"><td colspan="8">No Record(s) found.</td></tr>
<tr ng-if="isDataLot=='yes'" >
<td></td>
<td></td>
<td></td>
<td></td>
<td class="text-right">
<strong>Total:</strong>
</td>
<td class="text-right p-r-12">{{(addedTrxQty > 0) ? addedTrxQty : ''}}</td>
<td class="text-right p-r-12">{{(totalTrxValBal > 0) ? totalTrxValBal : ''}}</td>
</tr>
</tbody>
</table>
为了在控制器中获取它,我使用了以下代码:
var quantity = $scope.lotDetailsValues[parentIndex+ '' +childIndex+ '' +index];
以上是关于如何管理下表中的命名模型的主要内容,如果未能解决你的问题,请参考以下文章
xml 中的 Android 谷歌地图片段。我得到“意外的命名空间前缀”