我需要在其范围之外的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的建议,但输出仍然相同
最佳答案
对于ng-repeat范围,创建的工作方式不同。
对于每个循环,ng-repeat创建一个新的作用域,该作用域继承自父对象
但是这里有一个陷阱
如果在您的情况下该属性是原始计数,则仅在子作用域中创建一个副本。
ng-repeat的代码如下
childScope = scope.$new();
childScope[valueIdent] = value;
计数($ scope)
复制到
countCopy($ childScope)
因此,count属性的增量是在count的本地副本上完成的
在您的第一个循环中。
因此,您的所有增量都不会反射(reflect)在示波器的主要计数中。
解决方法是将计数作为对象内的属性。
如果将其更改为对象属性,则将复制对象
仍将引用相同的主计数属性。
countObj($ scope)
复制到
countObjCopy($ childScope)
countObj和countObjCopy都引用相同的属性count
//while initializing
<tbody ng-init="countObj={"count":0}" >
//while incrementing
<td>{{countObj.count= index1+1}}
在进一步深入研究中,似乎问题多于由于创建子范围而引起的问题。我已经评论了这个问题,它与 Angular 有关
View 渲染内部更新范围变量导致的无限摘要错误。
在这里引用更多https://docs.angularjs.org/error/ $ rootScope / infdig
所以最好的方法是在 View 内容之外更新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>{{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>