Как управлять именованием моделей в следующей таблице

Question

У меня есть следующая таблица: Просмотр таблицы лота

Я использую три нг-повтора, чтобы показать следующий ответ. Ответ из обзора бэкэнда

Подробный ответ от бэкэнда

Первый нг-повтор находится в <tbody>. Второй нг-повтор находится в <tr>. И третий - для повторения данных лота , Trx Кол-во и Balance , что составляет <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>

Я хочу динамически назвать модели Детали лота , Trx Кол-во и Баланс . Я назвал там идентификаторы, используя id="trx{{$parent.$parent.$index}}{{$parent.$index}}{{$index}} для количества транзакций. Я хочу добиться того же для ng-model.

Я использовал ng-model="trx[$parent.$index][$index]. Но у меня есть три вложенных нг-повтора. Это хорошо для двух вложенных ng-повторов. Как это можно сделать за три нг-повторения? Также я должен установить значения $scope.trx[i][j] в контроллере. Как правильно назвать модель, чтобы мы также могли установить ее значение в контроллере?

Answer 1

Я изменил свой 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];