Question

在我的文档中，我有一个实际的表示层，用于在购物车中组织信息。这一切都很好。

在底部，我有这个，我用来创建表单变量，当用户点击提交按钮时，它将被提交。

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

付款供应商要求将它们编号为item_number_0，item_number_1，item_number_2等。这意味着如果我要以嵌套方式循环学生然后收费，我需要在学生之间维持计数器。所需的呈现HTML输出如下：

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

我想做两件事之一：

在每个项目后将计数器增加1，或
根据该学生的学费数量增加每个学生结束时的计数器。

Answer 1

根据我之前链接的答案，这里有一个工作笔用于您的用例：https://codepen.io/tomsterritt/pen/KqZooa

代码如下：

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

在嵌套的Angular重复中维护计数器

1 个答案: