Maintaining counter in nested Angular repeats

Question

Higher up in my document, I have an actual presentation layer that organizes the information in a shopping cart. That's all fine.

At the bottom, I have this that I am using to create the form variables that will be submitted when the user clicks the Submit button.

<form>
  <p style="text-align:right;">
    <div data-ng-repeat="student in students">              
      <span data-ng-repeat="fee in student.fees" data-ng-if="fee.checked">
        <input type="text" name="item_number_{{}}" value="{{fee.fee_type_id}}" />
        <input type="text" name="item_name_{{}}" value="{{fee.fee_type_name}}" />                   
      </span>
    </div>          
  </p>
</form>

The payment vendor requires that they be numbered item_number_0, item_number_1, item_number_2, etc. That means if I'm going to loop over students then fees in a nested style, I need to maintain the counter across students. The desired rendered HTML output is like this:

<form>
  <p style="text-align:right;">
    <div data-ng-repeat="student in students">              
      <span data-ng-repeat="fee in student.fees" data-ng-if="fee.checked">
        <input type="text" name="item_number_0" value="{{fee.fee_type_id}}" />
        <input type="text" name="item_name_0" value="{{fee.fee_type_name}}" />                  
      </span>
      <span data-ng-repeat="fee in student.fees" data-ng-if="fee.checked">
        <input type="text" name="item_number_1" value="{{fee.fee_type_id}}" />
        <input type="text" name="item_name_1" value="{{fee.fee_type_name}}" />                  
      </span>
    </div>
    <div data-ng-repeat="student in students">              
      <span data-ng-repeat="fee in student.fees" data-ng-if="fee.checked">
        <input type="text" name="item_number_2" value="{{fee.fee_type_id}}" />
        <input type="text" name="item_name_2" value="{{fee.fee_type_name}}" />                  
      </span>
      <span data-ng-repeat="fee in student.fees" data-ng-if="fee.checked">
        <input type="text" name="item_number_3" value="{{fee.fee_type_id}}" />
        <input type="text" name="item_name_3" value="{{fee.fee_type_name}}" />                  
      </span>
      <span data-ng-repeat="fee in student.fees" data-ng-if="fee.checked">
        <input type="text" name="item_number_4" value="{{fee.fee_type_id}}" />
        <input type="text" name="item_name_4" value="{{fee.fee_type_name}}" />                  
      </span>
    </div>  
  </p>
</form>

I'd like to do either one of two things:

Increment a counter by 1 after each item, or
Increment the counter at the end of each student by the number of fees for this student.

Take a look at the answer (update) here: stackoverflow.com/a/22680964/1212081 — tomsterritt
– tomsterritt, Commented Jun 28, 2017 at 20:29
@tomsterritt I tried something like that here, and the counter doesn't increment correctly. ` <p style="text-align:right;" data-ng-init="ppitem = 0"> <div data-ng-repeat="student in students"> <span data-ng-repeat="fee in student.fees" data-ng-if="fee.checked"> <input type="text" name="item_number_{{ppitem}}" value="item_number_{{ppitem + $index}}" /> </span> <span data-ng-init="ppitem = ppitem + student.fees.length"></span> </div> </p>` — Adam Larsen
– Adam Larsen, Commented Jun 28, 2017 at 20:40

tomsterritt · Accepted Answer · 2017-06-28 21:12:12Z

0

Here's a working pen for your use-case based on the answer I linked to earlier: https://codepen.io/tomsterritt/pen/KqZooa

The code looks like so:

<div ng-repeat="student in students" ng-init="studentIndex = $index">
  <span ng-repeat="fee in student.fees" ng-if="fee.checked" ng-init="totalIterations[studentIndex] = totalIterations[studentIndex - 1] + student.fees.length; currentIteration = totalIterations[studentIndex-1] + $index;">
    <input type="text" name="{{'item_number_' + currentIteration}}" ng-value="fee.fee_type_id" />
    <input type="text" name="{{'item_name_' + currentIteration}}" ng-value="fee.fee_type_name" />
  </span>
</div>

answered Jun 28, 2017 at 21:12

tomsterritt

5125 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Maintaining counter in nested Angular repeats

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related