Search code examples
angularjsangularjs-directiveangularjs-ng-repeat

how to shows last index input value tag... ng-repeat


how to shows input value in last index in ng-repeat but its shows everyrow item... i want only last index user enter payment amount please anyone help me this highly appreciated

<table class="table display  table-hover table-bordered product-overview mb-10" id="support_table">
    <thead>
        <tr class="bg-info">
            <th class="col-md-4">Shirka Name</th>
            <th class="col-md-1">Approvals</th>
            <th class="col-md-2">CompanyRate</th>
            <th class="col-md-1">Mofa Upload Date</th>
            <th class="col-md-2">Payment</th>
            <th class="col-md-1">Balance</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in VisaPaymentList">
            <td>{{item.ShirkaName}}</td>
            <td>{{item.approvals}}</td>
            <td>{{item.CompanyRate}}</td>
            <td>{{item.DateField}}</td>
            <td><input ng-change="BalanceMinus()"
                       ng-model="item.PaymentReceived" autocomplete="off" 
                       id="payment" class="form-control input-height" 
                       placeholder="Payment" type="text">
            </td>
            <td>{{item.Balance}}</td>
        </tr>

    </tbody>
</table>

Solution

  • Use the ng-if directive with the $last property of the ng-repeat item scope:

        <tr ng-repeat="item in VisaPaymentList">
            <td>{{item.ShirkaName}}</td>
            <td>{{item.approvals}}</td>
            <td>{{item.CompanyRate}}</td>
            <td>{{item.DateField}}</td>
            <td>    
                <̶i̶n̶p̶u̶t̶ ̶n̶g̶-̶c̶h̶a̶n̶g̶e̶=̶"̶B̶a̶l̶a̶n̶c̶e̶M̶i̶n̶u̶s̶(̶)̶"̶
                <input ng-if="$last" ng-change="BalanceMinus()"
                       ng-model="item.PaymentReceived" autocomplete="off" 
                       ̶i̶d̶=̶"̶p̶a̶y̶m̶e̶n̶t̶"̶ ̶c̶l̶a̶s̶s̶=̶"̶f̶o̶r̶m̶-̶c̶o̶n̶t̶r̶o̶l̶ ̶i̶n̶p̶u̶t̶-̶h̶e̶i̶g̶h̶t̶"̶ ̶
                       name="payment" class="form-control input-height" 
                       placeholder="Payment" type="text">
            </td>
            <td>{{item.Balance}}</td>
        </tr>
    

    When $last is true, the <input> element will be added. Otherwise the <td> element will be empty.

    For more information, see