How to manage naming models in the following table
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 | 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>
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?
Solution
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="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>
In order to get it in controller I used the following code:
var quantity = $scope.lotDetailsValues[parentIndex+ '' +childIndex+ '' +index];
- ENOLOCK npm ERR! Error while running npm audit fix
- javascript onsubmit not working
- Embed image in email body nodemailer nodejs
- Detect Back Button in Navigation Guards of Vue-Router
- Error: Could not access built-in Node.js modules
- Failed to execute removeChild on Node
- Error: Cannot find module 'node:util' while running the nuxt project using npm run command
- Recharts issue with gaps between Bars
- google closure compiler - double compilation
- Which library should I use for server-side image manipulation on Node.JS?
- Stop propagation of 'click' event in Leaflet
- Creating new objects from frozen parent objects
- How to redirect to an "about:" URL
- How to convert FormData (HTML5 object) to JSON
- dynamically pass unknown number of parameters to react router
- What is the difference between a comparison operator and a logical operator?
- How to convert date to timestamp?
- Context Provider Specification
- Get previous page phonegap javascript
- Displaying date/time in user's timezone - on client side
- Google App Script to imitate File - Import csv file into a sheet using a custom menu item
- Intl.NumberFormat alter minus symbol
- Loading data server side and allow global access client side
- Set default value of Javascript object attributes
- Vue3 @update:modelValue NOT working on objects?
- Failed to resolve component: google-pay-button
- Vue.js 3 - instance without a component?
- When to use const with objects in JavaScript?
- Vue.js iterate complex object by data key
- Vuejs 3 query value in Json Object based on key