AngularJS过滤器：使用AngularJS过滤器查找数组的索引

Question

我得到了这个数据数组：

$scope.domainRows = [
  { domainName: 'example1.com', domainDescription: 'example1.com desc'},
  { domainName: 'example2.com', domainDescription: 'example2.com desc'},

];

这些行在UI上显示为表，用户单击删除row2，row2具有此信息

{ domainName: 'example2.com', domainDescription: 'example2.com desc'}

反正我是否可以使用AngularJS过滤器来获取row2的索引？应该有办法在AngularJS过滤器中做到但无法弄清楚。需要你的帮助。谢谢-k

Answer 1

使用纯JavaScript。

const domainRows = [
  { domainName: 'example1.com', domainDescription: 'example1.com desc'},
  { domainName: 'example2.com', domainDescription: 'example2.com desc'}
]
let selectedRow = { domainName: 'example2.com', domainDescription: 'example2.com desc'}
for (let i = 0; i < domainRows.length; i++){
  if (domainRows[i].domainName === selectedRow.domainName){
    console.log(i)
  }
}

代码采用vanilla JavaScript格式，因此可以在代码片段上运行以进行演示。您需要将其转换为Angular格式才能在项目中使用，但这只是一个小编辑。

Answer 2

如果您在表中显示它，您可以简单地将$index传递给ng-click指令以获取行索引，如下所示：

<tr ng-repeat="row in domainRows" ng-click="performAction($index)">
  <td>{{ $index + 1 }}</td>
  <td>{{ row.domainName }}</td>
  <td>{{ row.domainDescription }}</td>
</tr>

如果您想通过domainName和domainDescription属性过滤表格，那么您可以执行以下操作：

<label>Any: <input ng-model="search.$"></label>
<label>Name: <input ng-model="search.domainName"></label>
<label>Description: <input ng-model="search.domainDescription"></label>

<tr ng-repeat="row in domainRows | filter:search" ng-click="performAction($index)">
  <td>{{ $index + 1 }}</td>
  <td>{{ row.domainName }}</td>
  <td>{{ row.domainDescription }}</td>
</tr>