Question

我需要在其范围之外的ng-repeat指令中使用$ index的值。我尝试了几种解决方法但是没有成功。

这是我的代码：

<tbody ng-init="countObj={"count":0}" >
            <tr ng-repeat="data in result.data1" ng-init="index1 = $index" ng-if='result.data1'>
                <td>{{countObj.count = index1+1}}</td> // here I assing index1 to parent scope count
                <td>{{data}}{{countObj.count}}</td> // here count has the correct value
                <td>{{result.data2[$index]}}</td>                   
            </tr>
            <tr ng-repeat="data in result.data3" ng-init="index2 = $index" ng-if='result.data3'>
                <td>{{index2+countObj.count}}</td> // here I add count to index2
                <td>{{result.data3[$index]}}{{countObj.count}}</td> // here count has no value
                <td>{{result.data4[$index]}}</td>
            </tr>
            <tr ng-if='result.data1 == undefined && result.data3 == undefined'>
                <td><strong>No data to display.</strong></td>
            </tr>
</tbody>

这个完整的表位于我刚刚发布了tbody标签的自定义指令中。

指令如下：

<concept-details ng-repeat = "result in searchRes.list"></concept-details>

数据呈现得非常好，它只是我无法在第二个tr标签中获得的计数。

我在w3school测试了上面的解决方法，它运行得很好。这是我测试的代码：

<table>
<thead>
<tr>
    <th>S No.</th>
    <th>Header 1</th>
    <th>Header 2</th>

</tr>
</thead>
<tbody ng-init="count" >
    <tr ng-init="test = 5">
        <td>test is</td>
        <td>{{count = test}}</td>
        <td>end</td>
    </tr>
    <tr ng-init="test2 = 10">
        <td>test 2 is</td>
        <td>{{count + test2}}</td>
        <td>end</td>
    </tr>
</tbody>
</table>

我对angularjs相当新，请原谅我可能犯的任何错误。

非常感谢任何建议。

提前致谢。

编辑：代码更改为Naveen Kumar的建议，但仍然是相同的输出

Answer 1

对于ng-repeat范围创建的工作方式不同。对于每个循环，ng-repeat创建一个新的范围，该范围从父级继承但这里有一个问题如果属性在您的情况下是原始的，它只是在子范围中创建一个副本。 ng-repeat的代码如下

      childScope = scope.$new(); 
      childScope[valueIdent] = value;

count（$ scope）复制到 countCopy（$ childScope）

因此，count属性的增量是在count的本地副本上完成的在你的第一个循环中。

因此，您的所有增量都不会反映在您的范围内的主要数量中。解决方法是将count作为对象内的属性。如果将其更改为对象属性，则会生成对象的副本仍然会引用相同的主要计数属性。

countObj（$ scope）复制到 countObjCopy（$ childScope）

countObj和countObjCopy都引用相同的属性计数

//while initializing <tbody ng-init="countObj={"count":0}" > //while incrementing <td>{{countObj.count= index1+1}}

在进一步向下钻取时，似乎存在的问题多于由于子范围创建而导致的问题。我评论了问题，它与角度有关由视图渲染中更新的范围变量引起的无限摘要错误。请参阅此处了解更多https://docs.angularjs.org/error/ $ rootScope / infdig

因此，最好的方法是更新计数obj外部视图内容

其中一个解决方法是使用如下方法来更新countobj在第一个循环本身的init中的计数并使用index来显示

<tbody ng-init="countObj={'count':result.data1.length}" > <tr ng-repeat="data in result.data1" ng-init="index1 = $index" ng-if='result.data1'> <td>{{index1+1}}</td> // here I assing index1 to parent scope count <td>{{data}}{{index1+1}}</td> // here count has the correct value <td>{{result.data2[$index]}}</td> </tr> <tr ng-repeat="data in result.data3" ng-init="index2 = $index" ng-if='result.data3'> <td>{{index2+countObj.count+1}}</td> // here I add count to index2 <td>{{result.data3[$index]}}{{countObj.count}}</td> // here count has no value <td>{{result.data4[$index]}}</td> </tr> </tbody>

在angularjs中使用ng-repeat时扩展$ index的范围

1 个答案: