javascript - 使用 Angular 的树有时会深入 5 层，有时会更少，当它更少时需要 jquery 隐藏

Question

使用 Angular 的树有时会达到 5 层深度，有时会更少，我需要一个 jQuery 选择器来在按钮深度低于 5 层时隐藏按钮。

请引用代码片段。

groupToggle 函数显示或隐藏子项，并将 + 更改为负数，反之亦然。

.clsGrpToggle 函数是我遇到问题的地方。我不确定如何让 Controller 在代码片段中工作。

function groupToggle(symbolObj) {
        var symbolTxt = $(symbolObj).text();
        if (symbolTxt == "+") {
            $(symbolObj).text("-");
//            $(".groupList").show();  //shows all
            $(symbolObj).siblings(".groupList").show();
        }
        if (symbolTxt == "-") {
            $(symbolObj).text("+");
//            $(".groupList").hide();  //hides all
            $(symbolObj).siblings(".groupList").hide();
        }
    }

$(".clsGrpToggle").each(function() {
            if($(this).closest("li").has("ul")){
                console.log("if " + $(this).siblings().html());
//                $(this).hide();
            }
            else {
                console.log("else " + $(this).siblings().html());
//                $(this).hide();

            }
        });

.controller('MockRbacGroupController', function($scope, $routeParams) {

        $scope.roles = [
            {

                name: "role1"
            },

            {
                name: "role2"
            }];
        $scope.users = [
            {
                role: "role1",
                subUsers: [{
                    name: "agent1"
                },
                    {
                        name: "agent2"
                    }]

            }
        ];

    })

<table style="width: 100%; position: absolute; top: 232px; left: 870px;" ng-controller="mockRbacGroupController">
        <tr>
            <th>Roles</th>
        </tr>
        <tr ng-repeat="group in groupList | orderBy:'group'">
            <td>
                <button onclick="groupToggle(this);" class="clsGrpToggle">&#43;</button>&nbsp;{{group.name}}
                <ul class="groupList" style="display: none;" ng-repeat="group in group.children">
                    <li><button onclick="groupToggle(this);" class="clsGrpToggle">&#43;</button>&nbsp;{{group.name}}
                        <ul class="groupList" style="display: none;" ng-repeat="group in group.children">
                            <li><button onclick="groupToggle(this);" class="clsGrpToggle">&#43;</button>&nbsp;{{group.name}}
                                <ul class="groupList" style="display: none;" ng-repeat="group in group.children">
                                    <li><button onclick="groupToggle(this);" class="clsGrpToggle">&#43;</button>&nbsp;{{group.name}}
                                        <ul class="groupList" style="display: none;" ng-repeat="group in group.children">
                                            <li>{{group.name}}</li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </td>
        </tr>
    </table>

Answer 1

解决方案是按钮上的 ng-if="group.children.length"。感谢 charlieftl 提供了答案。