Javascript 展开/折叠树中的子元素（AngularJS）

我是AngularJS的新手，面临一个问题

需要创建消息历史记录树，该树在父项上提供展开/折叠功能

我已经创建了视图：

<div class="tree">
<ul>
    <li ng-repeat="appt in apptsToFilter() | filter: groupByAppt" ng-click="showChilds()">
        <span>{{appt.startTime}} - Appt. Id: {{appt.appointmentId}} </span>
        <ul>
            <li ng-repeat="item in appts | filter: {appointmentId: appt.appointmentId}" ng-show="active">
                <span>{{item.message}}</span>
            </li>
        </ul>
    </li>
</ul>
</div>

这是我展开第一个父项后得到的结果：

ParentItem2:
   - Child1
   - Child2
   - Child3

ParentItem2
   - Child1
   - Child2

ParentItem3
   - Child1

当我单击任何父项时-我的所有子树都会展开或折叠

但我预期会出现这样的结果，如下所示（只应展开单击的项目）：

---

欢迎提出任何意见。谢谢。

这是因为您将所有父项、可单击项设置为一个布尔值。这可以在HTML中解决，而无需激活

bool

将“显示/隐藏”元素设置为：

ng show=“appt.active”


然后将单击调用设置为：

ng click=“appt.active=！appt.active”


完整示例：

<div class="tree">
<ul>
    <li ng-repeat="appt in apptsToFilter() | filter: groupByAppt" ng-click="appt.active = !appt.active">
        <span>{{appt.startTime}} - Appt. Id: {{appt.appointmentId}} </span>
        <ul>
            <li ng-repeat="item in appts | filter: {appointmentId: appt.appointmentId}" ng-show="appt.active">
                <span>{{item.message}}</span>
            </li>
        </ul>
    </li>
</ul>
</div>

你的问题是什么？非常感谢。专业答案只需要折叠图标-+更好的是移动ng，因为孩子们点击折叠图标
ParentItem2:
   - Child1
   - Child2
   - Child3
ParentItem2
ParentItem3

<div class="tree">
<ul>
    <li ng-repeat="appt in apptsToFilter() | filter: groupByAppt" ng-click="appt.active = !appt.active">
        <span>{{appt.startTime}} - Appt. Id: {{appt.appointmentId}} </span>
        <ul>
            <li ng-repeat="item in appts | filter: {appointmentId: appt.appointmentId}" ng-show="appt.active">
                <span>{{item.message}}</span>
            </li>
        </ul>
    </li>
</ul>
</div>

$scope.showChilds = function () {
    $scope.active = !$scope.active
}