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

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

如果你想在＆＃34;信封中改变金额＆＃34;您需要将该行存储在该对象上的行。像：

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

Answer 2

我认为这段代码可以给你一个想法：

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

和

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

和脚本

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

如何更改具体值？

2 个答案: