Question

使用角度的树有时会变深5级，有时它变得更少，我需要一个jQuery选择器来隐藏按钮，当它低于5级时。

请参阅代码段。

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

.clsGrpToggle功能是我遇到问题的地方。我不确定如何让控制器在代码段中工作。

＆＃13;

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"
                    }]

            }
        ];

    })

＆＃13;

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

＆＃13;

Answer 1

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

使用角度的树有时会达到5级深度，有时会变得更少，需要jquery在它变小时隐藏

1 个答案: