展开/折叠的树子元素（AngularJS） [英] Expand/Collapse child elements in a tree (AngularJS)

问题描述

我开始在AngularJS和遇到的一个问题。

我需要创建消息历史树，这将提供展开/折叠的父项。

我已经创建的视图：

 ＆LT; D​​IV CLASS =树＆GT;
＆LT; UL＆GT;
    ＆LT;李NG重复=聘任中apptsToFilter（）|过滤器：groupByApptNG点击=showChilds（）＆GT;
        ＆LT;跨度＆GT; {{appt.startTime}}  - 聘任。 ID：{{appt.appointmentId}}＆LT; / SPAN＆GT;
        ＆LT; UL＆GT;
            ＆LT;李NG重复=在appts项目|过滤器：{appointmentId：appt.appointmentId}NG秀=活动＆GT;
                ＆LT;跨度＆GT; {{item.message}}＆LT; / SPAN＆GT;
            ＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

这是我对这个观点controoler：

 函数MessageHistoryController（$范围，$ routeParams，MessageHistoryResource）{
    ...... //一些code    $ scope.active = FALSE;
    $ scope.showChilds =功能（）{
        如果（$ scope.active == FALSE）{
            $ scope.active = TRUE;
        }其他{
            $ scope.active = FALSE;
        }
    };
}
 

这是我所得到的，当我第一次扩大父项：

  ParentItem2：
    -  Child1
    -  CHILD2
    -  Child3ParentItem2
    -  Child1
    -  CHILD2ParentItem3
    -  Child1
 

当我点击任何父项 - 全部 我的子树展开或折叠

但我预期这个结果，如下（仅点击了项目应扩展）

  ParentItem2：
    -  Child1
    -  CHILD2
    -  Child3
ParentItem2
ParentItem3
 

你有什么想法？谢谢你。

解决方案

这是因为你把所有的父母，可点击的内容，设置一个布尔值。这可以在没​​有有效 BOOL的HTML来解决。

1. 您显示/隐藏元素设置为：

   
     

   NG-秀=appt.active

   
   




2. 然后设置你的点击呼叫：

   
     

   NG-点击=appt.active =！appt.active

   
   

完整的例子：

 ＆LT; D​​IV CLASS =树＆GT;
＆LT; UL＆GT;
    ＆LT;李NG重复=聘任中apptsToFilter（）|过滤器：groupByApptNG点击=appt.active = appt.active！＆GT;
        ＆LT;跨度＆GT; {{appt.startTime}}  - 聘任。 ID：{{appt.appointmentId}}＆LT; / SPAN＆GT;
        ＆LT; UL＆GT;
            ＆LT;李NG重复=在appts项目|过滤器：{appointmentId：appt.appointmentId}NG秀=appt.active＆GT;
                ＆LT;跨度＆GT; {{item.message}}＆LT; / SPAN＆GT;
            ＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

虽然 appt.active 当点击它会变成真正的，至少它在我结束这就是我如何处理这些案件将初始化为未定义。

您可以还通过循环聘任，并在JavaScript中定义活跃。

---

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

  $ scope.showChilds =功能（）{
    $ scope.active =！$ scope.active
}
 

I'm starting in AngularJS and encountered a problem.

I need to create message history tree, which will provide expand/collapse on parent item.

I've created view:

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

This is my controoler for this view:

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

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

This is what I get, when I've expanded first parent item:

ParentItem2:
   - Child1
   - Child2
   - Child3

ParentItem2
   - Child1
   - Child2

ParentItem3
   - Child1

When I click on any parent item - all of my subtrees expanded or collapsed.

But I expected this result, as below (only clicked item should be expanded):

ParentItem2:
   - Child1
   - Child2
   - Child3
ParentItem2
ParentItem3

Have you any idea? Thanks.

解决方案

That's because you have all of your parent, clickable items, set to one boolean. This can be resolved in the HTML without the active bool.

1. Set your show/hide element to:

   ng-show="appt.active"

2. Then set your click call to:

   ng-click="appt.active = !appt.active"

Full Example:

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

Even though appt.active would initialize as undefined when clicked it will change to true, at least it does on my end and this is how I handle these cases.

You could also loop through the appt and define active in the javascript.

---

For future reference you can simplify your $scope.showChilds function to:

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

这篇关于展开/折叠的树子元素（AngularJS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！