Question

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

如果父行没有子节点，我希望它们是可选择的，否则只能选择子行。这是一种只选择一种表格。

我可以正常使用这个功能，你可以在这个plunker中看到：

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

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

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

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

然而，这打破了我的选择选项。如果你点击第一个plunker中的选项并与第二个plunker比较，你会看到我的意思。为什么这些会破裂？我该如何解决？

Answer 1

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

<强> DemoCtrl

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

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

2.Trim down your＆＃34; get＆＃34;用于设置这些变量的函数。我可能已经删除了其他地方使用但与此问题无关的其他内容。

$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)">

ng-repeat中的过滤器打破了表

1 个答案: