AngularJS增加嵌套转发器中项目的id值

时间:2015-12-07 21:04:30

标签: javascript html angularjs

我有以下代码,其中有问题和选择,我需要选择增加id值。

但是,每次出现新问题时,我都需要重新开始增量。到目前为止我发现的大多数例子都是增量(例如使用$ index)。但我在这里看过几篇关于SO的文章,例如this one而没有得到我需要的结果:

我需要的是:

 Question 1
     Choice10 (the first numerical value is the Id of the question,
     Choice11  the second numerical value should be the incremented id)
     Choice12
 Question 2
     Choice20
     Choice21
     Choice22
     Choice23

html代码如下所示:

<table summary="" style="border: none; width: 100%; background: none;" id="rptQuestions">
      <tbody>
        <tr style="width: 100%;" ng-repeat-start="q in questions track by $index"> 
             ...Question details here...        
        </tr>
        <tr>
            <td class="Bold_10" colspan="4">
            <table summary="" style="border: none; background: none">
                <tbody>
                   <tr ng-repeat-start="c in choices" ng-if="c.QuestionId==q.QuestionId">
                        <td style="width: 2em;"><a href="javascript:void(0);" ng-click="DeleteChoice(c)">X</a></td>
                        <td>
                             <input type="text" id="inLetter{{c.QuestionId}}{{ value?? }}" ng-model="c.Letter" style="width: 2em;" /></td>
                        <td style="text-align: left;">
                             <input type="text" id="inChoice{{c.QuestionId}}{{ value?? }}" ng-model="c.Choice" style="width: 60em;" />                                                                                  <input type="hidden" id="inChoiceId{{c.QuestionId}}{{ value?? }}" ng-value="{{c.Id}}" /></td>
                    </tr>
                    <tr ng-repeat-end ng-if="c.QuestionId==null"><td colspan="3"></td></tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
    </table>

1 个答案:

答案 0 :(得分:2)

<table summary="" style="border: none; width: 100%; background: none;" id="rptQuestions">
      <tbody>
        <tr style="width: 100%;" ng-repeat-start="q in questions"> 
             ...Question details here...        
        </tr>
        <tr ng-repeat-end="">
            <td class="Bold_10" colspan="4">
            <table summary="" style="border: none; background: none">
                <tbody>
                   <tr ng-repeat-start="c in choices" ng-if="c.QuestionId==q.QuestionId">
                        <td style="width: 2em;"><a href="javascript:void(0);" ng-click="DeleteChoice(c)">X</a></td>
                        <td>
                             <input type="text" id="inLetter{{$parent.$index}}{{$index}}" ng-model="c.Letter" style="width: 2em;" /></td>
                        <td style="text-align: left;">
                             <input type="text" id="inChoice{{$parent.$index}}{{$index}}" ng-model="c.Choice" style="width: 60em;" />                                                                                  <input type="hidden" id="inChoiceId{{$parent.$index}}{{$index}}" ng-value="{{c.Id}}" /></td>
                    </tr>
                    <tr ng-repeat-end ng-if="c.QuestionId==null"><td colspan="3"></td></tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
    </table>

每个ng-repeat都有自己的索引,您可以从嵌套循环中访问索引。但请注意,使用您的实现时,id inChoice111可能会产生误导。

问题1.11 ==问题11.1