角度过滤器和ng-click不起作用

Question

我有一个菜单列出一组列表：

<ul>
  <li ng-repeat="group in getData">
    <a ng-click="groupId = group.id">{{group.id}}</a>
  </li>
</ul>

单击该项目，应更新groupId但显然不是。

我还创建了一个从groupId获取值的过滤器：

Data.query(function(data) {
  $scope.getData = data;
  $scope.currentGroup =  $filter('filter')(data, {id: $scope.groupId});
  $log.debug($scope.groupId);
  $log.debug($scope.currentGroup);
}, function(reason) {
  $log.error(reason)
});

那应该过滤以下列表以仅显示具有所选groupId项目：

<tr ng-repeat="list in currentGroup.lists">
  <td>{{list.name}}</td>
</tr>

但是，它也不起作用。 我可以在控制台中记录正确的数组，但是表未显示任何数据。

请看看这个柱塞 。

Answer 1

在您的Plunker中，您可以像这样使用它

<table>
    <tr ng-repeat="group in currentGroup">
      <td ng-repeat="list in group.lists">{{list.name}}</td>
    </tr>
</table>

因为currentGroup也是一个数组

Answer 2

您的代码有多个问题。 这里是2：

1. ng-repeat创建自己的子范围，因此当您执行ng-click="groupId = group.id" ，您要分配子范围的groupId ，您应该设置父范围：

    <a ng-click="$parent.groupId = group.id">{{group.id}}</a> 

   但这看起来不太好； 尝试使用as语法 ，或从函数中分配它。

2. $filter返回一个数组，因此您必须选择第一个元素以正确分配currentGroup ：

    $scope.currentGroup = $filter('filter')(data, {id: $scope.groupId})[0]; 

这是修复了这两个问题的工具：

http://plnkr.co/edit/f9ylUZ9mpInB00zzlYQd?p=preview