Question

我是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>

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

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

任何想法都表示赞赏。感谢。

Answer 1

那是因为您拥有所有父级可点击项，设置为一个布尔值。这可以在没有active bool的HTML中解决。

将您的show / hide元素设置为：

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>

即使appt.active在点击时初始化为未定义，它也会变为true，至少它会在我的结尾处进行，这就是我处理这些情况的方法。

您还可以遍历appt并在javascript中定义有效。

为了将来参考，您可以将$scope.showChilds功能简化为：

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

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

1 个答案: