问

展开/折叠树中的子元素(AngularJS)

温暖不醒的aprildRi-1965 发布于 2023-02-12 19:20

tree

我是AngularJS的新手,遇到了一个问题.

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

我创建了视图:



    
        {{appt.startTime}} - Appt. Id: {{appt.appointmentId}} 
        
            
                {{item.message}}

这是我对此观点的控制者:

function MessageHistoryController($scope, $routeParams, MessageHistoryResource) {
    ......//some code

    $scope.active = false;
    $scope.showChilds = function() {
        if ($scope.active == false) {
            $scope.active = true;
        } else {
            $scope.active = false;
        }
    };
}

当我扩展第一个父项时,这就是我得到的:

ParentItem2:
   - Child1
   - Child2
   - Child3

ParentItem2
   - Child1
   - Child2

ParentItem3
   - Child1

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

但我期望这个结果,如下所示(只有点击的项目应该扩展):

ParentItem2:
   - Child1
   - Child2
   - Child3
ParentItem2
ParentItem3

任何想法都表示赞赏.谢谢.

1 个回答

那是因为您拥有所有父级可点击项,设置为一个布尔值.这可以在没有activebool 的HTML中解决.
完整示例:
```
<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>
```
即使appt.active在单击时将初始化为未定义,它也会变为true,至少它会在我的结尾处执行,这就是我处理这些情况的方法.

你也可以appt在javascript中循环并定义active.

为了将来参考,您可以简化您的$scope.showChilds功能:
```
$scope.showChilds = function () {
    $scope.active = !$scope.active
}
```
2023-02-12 19:23 回答

哀公家园_678

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签