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

Posted 2023-03-05

【中文标题】在 angularjs 中使用 ng-repeat 时扩展 $index 的范围

【英文标题】：Extending the scope of $index when using ng-repeat in angularjs

【发布时间】：2015-05-05 01:05:43

【问题描述】：

我需要在 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>datacountObj.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 的建议，但输出仍然相同

【参考方案1】：

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

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

计数（$范围） 复制到 countCopy($childScope)

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

所以最好的方法是在视图内容之外更新 count obj

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

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

【讨论】：

嗨@Naveen Kumar N，感谢您的帮助。但是您提到的解决方案仍然提供相同的输出。我的第二个 tr 中的计数从 0 开始。如果有任何问题，请检查编辑后的答案。

嗨 droidArrh，我已经深入研究了您的问题。本质上，导致问题的代码是

countObj.count = index1+1 似乎每次更新计数时角度都会尝试更新视图，这会导致错误，称为@987654322 @ 所以显然 angularjs 不允许在视图渲染中更新范围变量。

感谢@Naveen 的帮助。你的建议让我知道我做错了什么。我没有在 tr 标签中分配计数，而是在 tbody 标签中分配了数组的长度，它就像一个魅力。请编辑您的答案，以便我接受它作为该问题的正确答案。

谢谢@DroidArrrh。这个问题帮助我为我当前的基础添加了新的相似之处。谢谢和问候。

我们总是通过帮助他人和寻找新挑战来学习。您能否建议一些可以更详细地学习 angularjs 的好资源。我开始从 codeschool 学习 angularjs 基础知识。