我有一个表,每行中最后一列包含一个加载图标,当单击表中的按钮时,我希望显示.
当每个表行都使用ng-repeat生成时,加载器将显示在每一行中,而不是单个行中.只能点击当前索引,如何将ng-show设置为true或false？
模板：
<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>
控制器：
$scope.someAction = function(recordName) {
$scope.loading = true;
};
解决方法
您可以传入$index参数并设置/使用相应的索引. $index可以在ng重复的范围内自动使用.
<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;
};
下面是一个通用示例,其中所有的逻辑视图为方便起见：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>
