0

我有下一个html代码：

<div class="collapse navbar-collapse menu-sidebar">
    <ul class="nav nav-stacked" id="menu-bar">
        <li class="panel dropdown" ng-repeat="m in menuSidebar.links">
            <a data-toggle="collapse" data-parent="#menu-bar" data-target="#{{'menuSidebar' + $index}}" href="">
                {{m.text}}
            </a>
            <div id="{{'menuSidebar' + $index}}" class="panel-collapse collapse submenu-sidebar">
                <ul class="nav nav-stacked">
                    <li ng-repeat="s in m.sub" ng-class="{active: s.active}"><a href="{{s.link}}">{{s.text}}</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

下一个json：

$scope.menuSidebar = {
    "links": [
        {
            "text": "Total",
            "sub": [
                {
                    "active": true,
                    "link": "#",
                    "text": "General"
                },
                {
                    "active": false,
                    "link": "#",
                    "text": "Cargos"
                },
                {
                    "active": false,
                    "link": "#",
                    "text": "Prestadora"
                },
                {
                    "active": false,
                    "link": "#",
                    "text": "Factura"
                }
            ]
        },
        {
            "text": "Departamento",
            "sub": [
                {
                    "active": false,
                    "link": "#",
                    "text": "Costos"
                },
                {
                    "active": false,
                    "link": "#",
                    "text": "Tiempos"
                }
            ]
        }
    ]
};

我想在任何孩子是active==true.

<div id="{{'menuSidebar' + $index}}" ng-class="active: ..." class="panel-collapse collapse submenu-sidebar">

如何遍历所有孩子并确定班级？在这种情况下可以使用 ng-class 吗？

谢谢

4

2 回答 2

0

无需解析所有子项，通过在控制器中定义“some_active”变量

<li ng-repeat="s in m.sub" ng-class="{active: s.active}" ng-init="$parent.some_active=$parent.some_active||s.active"><a href="{{s.link}}">{{s.text}}</a></li>

那么你可以使用

<div id="{{'menuSidebar' + $index}}" ng-class="{active:some_active}" class="panel-collapse collapse submenu-sidebar">

此解决方案要求您还修改 li 的单击处理程序上的 some_active 变量

如果您不想这样做，其他解决方案将是

<div id="{{'menuSidebar' + $index}}" ng-class="{active:someActive()}" class="panel-collapse collapse submenu-sidebar">

其中“active:someActive”将是在您的范围内定义的函数，它遍历您的子菜单树并在某些选项处于活动状态时返回 true 或 false。

底线取决于您的布局以及您喜欢通知还是脏检查

于 2014-05-21T18:37:29.443 回答
0

我将创建一个接收相关链接的范围函数：

$scope.hasActiveChildren = function(link) {
    for(var i=0; i < link.sub.length; i++) {
        if(link.sub[i].active) {
            return true;   
        }
    }

    return false;
};

然后像上面一样将它添加到标记中：

<div id="{{'menuSidebar' + $index}}" ng-class="{'active': hasActiveChildren(m)}" class="panel-collapse collapse submenu-sidebar">

这是JSFiddle

于 2014-05-21T18:37:31.387 回答