ng-repeat 中的过滤器破坏了表中的可选选项答案

【问题标题】：Filter in ng-repeat is breaking selectable options in tableng-repeat 中的过滤器破坏了表中的可选选项
【发布时间】：2016-07-14 17:01:08
【问题描述】：

我有一个显示可选信息的表格。有父行和子行。

如果父行没有子行，我希望它们是可选的，否则只有子行应该是可选的。这是一种只选择一种类型的表格。

正如您在这个 plunker 中看到的那样，我的功能正常工作：

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

但是我想过滤掉一些数据。为此，我添加了一个过滤器，如下所示：

ng-repeat-start="(pIndex, x) in pro | filter:{ f: '!B'} | filter:{ f: '!C'}"

带有过滤器的插件在这里：http://plnkr.co/edit/xDo5kLsUzIILK4nVyWsa?p=preview

但是，这会破坏我的选择选项。如果您单击第一个 plunker 中的选项并与第二个 plunker 进行比较，您就会明白我的意思。为什么这些坏了？我该如何解决？

【问题讨论】：

标签： javascript angularjs filter angularjs-ng-repeat angularjs-ng-click

【解决方案1】：

您应该能够通过一些更改来简化此操作。我把你的plunk 分叉了，这样你就可以看到它的实际效果了。

DemoCtrl

1.添加将包含所选对象的范围变量。

$scope.selections = {
  parent: {},
  child: {}
};

2.修剪你的“get”函数来设置这些变量。我可能已经删除了在其他地方使用但与此问题无关的其他内容。

$scope.getParentDetails = function(parentObj) {
  if (!parentObj.jobs || parentObj.jobs.length === 0) {
    $scope.selections.parent = parentObj;
    $scope.selections.child = {};
  }
};

$scope.getChildDetails = function(childObj) {
  $scope.selections.parent = {};
  $scope.selections.child = childObj;
};

HTML

更改标记以使用新的对象变量：

<tr ng-repeat-start="(pIndex, x) in pro | filter:{ f: '!B'} | filter:{ f: '!C'}" ng-class="{'selected': selections.parent == x}" ng-click="getParentDetails(x)">

<tr ng-repeat-end ng-repeat="job in x.jobs" ng-class="{'selected':selections.child == job}" ng-click="getChildDetails(job)">

【讨论】：