2014-05-13 3 views
1

봉투 금액의 미리보기를 표시하려고합니다. 예를 들어 선택 상자에서 봉투를 선택하면 금액이 변경됩니다. 이 변경은 작동하지만 모든 행의 모든 ​​봉투 금액이 변경됩니다. 봉투를 교환하는 금액 만 변경하고 싶습니다. 여기 특정 값을 변경하는 방법?

내 코드입니다 :

  <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 

답변

1

당신이 금액은 당신이 보관해야하는 "봉투"행에서 변경하려는 경우 그 객체의 양. 마찬가지로 :

{{ envelope.new_envelope_amount|currency }} 

과 방법뿐만 아니라 봉투의 양을 처리해야합니다

<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.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; 
       } 
      } 
     }; 
+0

감사합니다 ... 나는 이것을 시도 할 것입니다 – catherine

+0

'[[[t.envelope.amount]]]'와 같은 외래 값에 접근하는 법을 알고 있습니까? 이 코드는 작동하지 않습니다. – catherine

+0

JSON 개체의 데이터에 따라 다릅니다. – Dalorzo

0

은이 코드는 U에게 아이디어를 줄 수 있다고 생각

및 스크립트

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

엔벌 로프 양이 엔벌 로프가 아닌 트랜잭션의 ng-repeat 미만이므로 코드가 작동하지 않습니다. – catherine

+0

내 코드가 업데이트되어 도움이 될 것이라고 생각합니다. –

관련 문제