Styjun

I have the following table:
Lot Table View

I am using three ng-repeat to show the following response.
Response from backend overview

Detailed response from backend

The first ng-repeat is in <tbody> . The second ng-repeat is in <tr>. And the third one is for repeating the Lot Details, Trx Qty and Balance which is <span>.

Following is my html code:

<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 
 </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"/>
 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>

I want to dynamically name the models of Lot Details, Trx Qty and Balance . I have named there ids using id="trx$parent.$parent.$index$parent.$index$index for transaction quantity. I want to achieve the same for ng-model.

I have used ng-model="trx[$parent.$index][$index]. But I have three nested ng-repeat. This is good for two nested ng-repeat. How can it be done for three ng-repeat?
Also I have to set the $scope.trx[i][j] values in controller.
What is the right way to name the model so that we can also set its value in controller?

I changed my HTML code to this :

<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="lotHiddenCheckboxparentIndexlotDataChildIndex">
 <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 
 </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="lotDetailsparentIndexlotDataChildIndexlotDetailsIndex" value="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="lotDetailsValuesparentIndexlotDataChildIndextrxQtyIndex" 
 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="trxparentIndexlotDataChildIndextrxQtyIndex" 
 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="balAmtparentIndexlotDataChildIndexbalanceIndex" 
 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="balNewparentIndexlotDataChildIndexbalanceNewIndex"/>
 <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>

In order to get it in controller I used the following code:

var quantity = $scope.lotDetailsValues[parentIndex+ '' +childIndex+ '' +index];