javascript - 在 AngularJS 中，确定应显示内部元素的最直接方法是什么？

Question

我有一个 JSON 结构，它表示为分层元素。它看起来像下面这样:

{
  "url":"http://docsetups.json",
  "partnerId":1,
  "fieldDefs":
  [
    {"roleName":"Make","roleId":1,
      "children":[{"roleName":"Invoice Number","roleId":11}]
    },
    {"roleName":"Model","roleId":2,
      "children":[
        {"roleName":"Manufacturer","roleId":21},
        {"roleName":"EquipmentCode","roleId":22},
        {"roleName":"EquipmentSSN","roleId":23}
      ]
    }
  ]
}

笨蛋

我已经在以下位置创建了一个 plunker:http://plnkr.co/edit/betBR2xLmcmuQR1dznUK?p=preview

我使用 ng-repeat 在元素中将其显示为元素层次结构，如下所示:

当我单击任一元素时，整个结构将展开并如下所示:

渲染 DOM 的代码非常简单，如下所示:

<div  class="headerItem"  
    ng-class="{focus: hover}" 
    ng-mouseenter="hover = true"
    ng-mouseleave="hover = false"
    data-ng-click="vm.onClick(item.roleName)" 
      data-ng-repeat="item in vm.documentSetups.fieldDefs">{{item.roleName}}
    <div class="subItem" ng-show="vm.isVisible" 
      data-ng-repeat="subItem in item.children">[ ] {{subItem.roleName}}
    </div>
</div>

vm.isVisible

这里要关注的是具有 ng-show="vm.isVisible"的子项，这样它仅在该值为 true 时才显示。

仅显示被单击父项的子项

但是，我只想在单击其父项时显示子项，而不是像现在那样显示所有子项。有人可以提供一个好方法来做到这一点吗？我希望在没有指令的情况下完成它，因为我感兴趣的是在没有指令的情况下这是否可能，或者在这种情况下代码是否非常复杂。

如果您有一个包含创建指令的解决方案，请使其尽可能简单。谢谢。

Answer 1

我认为您应该为每个项目定义一个标志，以确定该项目是否打开。然后将项目本身传递给处理程序:

data-ng-click="vm.onClick(item)

之后 - 您只需反转 isOpen 标志即可:

function onClick(item)
{
    item.isOpen = !item.isOpen;
}

整个 View 片段:

<div class="headerItem"  
      ng-class="{focus: hover}" 
      ng-mouseenter="hover = true"
      ng-mouseleave="hover = false"
      data-ng-click="vm.onClick(item)" data-ng-repeat="item in vm.documentSetups.fieldDefs">{{item.roleName}}
   <div class="subItem" ng-show="item.isOpen" data-ng-repeat="subItem in item.children">[ ] {{subItem.roleName}}</div>
</div>

骗子:http://plnkr.co/edit/N8mUZaVfmLpnlW4kxzSr?p=preview