AngularJS：选择父级li时渲染子级li

Question

我有一个要求，我只需要显示所选li的孩子。 例如 在下图所示的图像中，检查了EIS_ASCP_FORECAST_SETS_V ，因此显示了其子FND_USER和MRP_FORECAST_DESIGNATORS_V，其余元素被隐藏。 同样，选择FND_USER时，必须显示其子级。 该树是使用jquery创建的，并且是动态的。 我在页面的其余部分使用AngularJS。

我尝试使用$(event.target).parent().find('li')但无法从中获得子元素。

形成树的代码

<li class="treeView">
<a ng-click="getViewColumns('EIS_ASCP_FORECAST_SETS_V', '724')" href=""><b>EIS_ASCP_FORECAST_SETS_V</b></a>&nbsp;<input type="checkbox" ng-checked="true" ng-click="useInSelect('EIS_ASCP_FORECAST_SETS_V')">
    <ul>
        <li><a ng-click="getViewColumns('FND_USER', '724')" href="">FND_USER</a>&nbsp;<input type="checkbox" ng-click="useInSelect('FND_USER')">
        <li><a ng-click="getViewColumns('MRP_FORECAST_DESIGNATORS_V', '724')" href="">MRP_FORECAST_DESIGNATORS_V</a>&nbsp;<input type="checkbox" ng-click="useInSelect('MRP_FORECAST_DESIGNATORS_V')"></a>
    </ul>

Answer 1

您可以将ng-if="showHideComp(parentId)"到子元素。 在showHideComp（）函数内部，检查parentId的isSelected属性，并相应地返回true / false。

例：

<input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>

选中时显示：

<span ng-if="checked" class="animate-if">
   This is removed when the checkbox is unchecked.
</span>