javascript 如何访问和使用 ng-repeat 中每个项目的索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21743123/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to access and use index of each item inside ng-repeat
提问by greg
I have a table where the last column in each row contains a little loading icon which I would like to display when a button inside the table is clicked.
我有一个表格，其中每行的最后一列包含一个小加载图标，当单击表格内的按钮时，我想显示该图标。
When each table row is generated with ng-repeat, the loader shows up in every row rather than the individual one. How can I set ng-show to true or false for only the current index clicked?
当使用 ng-repeat 生成每个表行时，加载程序会出现在每一行而不是单个行中。如何仅针对单击的当前索引将 ng-show 设置为 true 或 false？
Template:
模板：
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record.name)">Some Action</a></td>
<td ng-show="loading">Loading...</td>
</tr>
Controller:
控制器：
$scope.someAction = function(recordName) {
$scope.loading = true;
};
回答by m59
You can pass in the $indexparameter and set/use the corresponding index. $indexis automatically available in the scope of an ng-repeat.
您可以传入$index参数并设置/使用相应的索引。$index在 范围内自动可用ng-repeat。
<td><a ng-click="someAction(record.name, $index)">Some Action</a></td>
<td ng-show="loading[$index]">Loading...</td>
$scope.someAction = function(recordName, $index) {
$scope.loading[$index] = true;
};
Here's a generic sample with all the logic in the view for convenience: Live demo (click).
为方便起见，这是一个包含所有逻辑的通用示例：现场演示（单击）。
<div ng-repeat="foo in ['a','b','c']" ng-init="loading=[]">
<p ng-click="loading[$index]=true">Click me! Item Value: {{foo}}<p>
<p ng-show="loading[$index]">Item {{$index}} loading...</p>
</div>
回答by SalvadorBFM
There are many ways to handle this.
有很多方法可以处理这个问题。
The problem here is that your variable loading is sharing the scope between the rows.
这里的问题是您的变量加载共享行之间的范围。
One approach could be use $index
一种方法是使用$index
HTML
HTML
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record.name, $index)">Some Action</a></td>
<td ng-show="loading">Loading...</td>
</tr>
JS
JS
$scope.someAction = function(recordName, $index) {
$scope.loading[$index] = true;
};
Using a property in your object record:
在对象记录中使用属性：
HTML
HTML
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record)">Some Action</a></td>
<td ng-show="record.loading">Loading...</td>
</tr>
JS
JS
$scope.someAction = function(record) {
var name = record.name;
record.loading = true;
};
Best regards
最好的祝福
回答by jansesun
The scope inside ng-repeat is different form the one outside. Actually the scope outside ng-repeat is the parent of the one inside. So the html code goes here
ng-repeat 内部的作用域与外部的作用域不同。实际上 ng-repeat 之外的作用域是内部作用域的父级。所以html代码放在这里
<tr ng-repeat="record in records">
<td>{{ record.name }}</td>
<td><a ng-click="someAction(record)">Some Action</a></td>
<td ng-show="$parent.loading">Loading...</td>
</tr>
