How to change specific value?

Question

I'm trying to show the preview of an envelope amount. For example, I choose an envelope in the select box then the amount will change. This changing is working but it will change all the envelopes amount in all row. I want to change only the amount where I change the envelope.

Here's my code:

         <table class="simple-table  table--responsive">
            <thead>
            <tr>
                <th>Date</th>
                <th class="align-right">Amount</th>
                <th class="align-right">
                    Envelope
                    <button class="button compact" ng-click="assignAllEnvelopes()" title="Assign All Envelopes"><span class="icon-tick"></span></button>
                </th>
            </tr>
            </thead>
            <tbody ng-cloak>
            <tr ng-repeat="t in transactions">
                <td data-th="Date" style="white-space: nowrap;">
                    <a href="#" editable-date="t.date" onaftersave="updateTransaction(t)">[[[ t.date | date:'MMM. d, yyyy' ]]]</a><br/>
                    <small class="anthracite icon-download" ng-hide="!(t.memo | import_date)">[[[ t.memo | import_date | date:'MMM. d, yyyy' ]]]</small></td>
                <td class="align-right" data-th="Amount">
                    <span ng-class="{red: t.amount < 0}">[[[ t.amount|currency ]]]</span>
                </td>
                <td class="align-right" data-th="Envelope" style="white-space: nowrap;">
                    <button class="button compact" ng-click="moveToUnallocated(t)" ng-hide="t.amount < 0" title="Move to Unallocated"><span class="icon-inbox"></span></button>
                    <select ui-select2="{formatResult: format_envelope_option, formatSelection: format_envelope_option}" ng-model="t.envelope_id" ng-change="previewEnvelopeAmount(t)" data-placeholder="Select Envelope">
                        <option value=""></option>
                        <option ng-repeat="envelope in envelopes" value="[[[ envelope.id ]]]" data-icon="[[[ envelope.icon__icon ]]]">[[[ envelope.name ]]]</option>
                    </select>&nbsp;
                    <button class="button compact" ng-click="assignEnvelope(t)" ng-disabled="!t.envelope_id" title="Assign Envelope"><span class="icon-tick"></span></button>

                    <---- This is the code where envelope amount show ---->
                    <small><span class="tag float-right" ng-hide="!t.envelope_id" ng-class="colorClass(new_envelope_amount)">[[[ new_envelope_amount|currency ]]]</span></small>


                </td>
            </tr>
            </tbody>
        </table>

Script:

        $scope.envelopes = {{ envelopes|safe }};
        $scope.new_envelope_amount = 0.0;

        $scope.previewEnvelopeAmount = function(trans){
            for(var i= 0; i<$scope.envelopes.length; i++){
                if ($scope.envelopes[i]['id'] == trans.envelope_id){
                    $scope.new_envelope_amount = $scope.envelopes[i]['amount'] - trans.amount;
                    break;
                }
            }
        };

        $scope.colorClass = function(amount){
            return {'red-bg': amount < 0, 'green-bg black': amount >= 0};
        };

views.py

 class TransactionViewSet(viewsets.ModelViewSet):
    model = models.Transaction
    serializer_class = serializers.TransactionSerializer

    def get_queryset(self):
        queryset = models.Transaction.objects.filter(
            account__user=self.request.user).select_related('account')
        if self.request.QUERY_PARAMS.get('unassigned'):
            queryset = queryset.filter(envelope__isnull=True)
        return queryset

Answer 1

I think this code could give u idea:

<small><span class="tag float-right" ng-hide="!t.envelope_id" ng-class="colorClass(new_envelope_amount)">{{envelope['amount']}}</span></small>

and

 <select ui-select2="{formatResult: format_envelope_option, formatSelection: format_envelope_option}" ng-model="envelope" ng-change="previewEnvelopeAmount(t,envelope)" data-placeholder="Select Envelope">
                    <option value=""></option>
                    <option ng-repeat="e in envelopes" value="[[[ e]]]" data-icon="[[[ envelope.icon__icon ]]]">[[[ e.name ]]]</option>
                </select>&nbsp;
                <button class="button compact" ng-click="assignEnvelope(t,envelope)" ng-disabled="!t.envelope_id" title="Assign Envelope"><span class="icon-tick"></span></button>

and script

$scope.envelope=null;
$scope.previewEnvelopeAmount = function(trans, e){
              $scope.envelope = e.amount - trans.amount;
        }
    };

Answer 2

If you want amounts to change in the "Envelope" row you need to store the amount on that object. Like:

{{ envelope.new_envelope_amount|currency }}

and your method should be processing the amount on envelope as well:

$scope.previewEnvelopeAmount = function(trans, envelope){
            for(var i= 0; i<$scope.envelopes.length; i++){
                if ($scope.envelopes[i]['id'] == trans.envelope_id){
                    envelope.new_envelope_amount = $scope.envelopes[i]['amount'] - trans.amount;
                    break;
                }
            }
        };