javascript - 如何更改具体值？

Question

我正在尝试显示信封金额的预览。例如，我在选择框中选择一个信封，然后金额就会改变。此更改有效，但它将更改所有行中的所有信封金额。我只想更改更改信封的金额。

这是我的代码:

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

脚本:

        $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};
        };

View .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

如果您希望更改“信封”行中的金额，则需要将该金额存储在该对象上。喜欢:

{{ envelope.new_envelope_amount|currency }}

您的方法也应该处理信封上的金额:

$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;
                }
            }
        };