我有一个表,每行中最后一列包含一个加载图标,当单击表中的按钮时,我希望显示.
当每个表行都使用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; };
解决方法@H_502_14@
您可以传入$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>
<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>