AngularJS and ng-class

Question

我有下一个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"
                }
            ]
        }
    ]
};

我想定义div的类在任何子元素是active==true的情况下。

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

如何循环遍历所有子类并确定类?在这种情况下可以使用ng类吗?

谢谢

Answer 1

不需要解析所有的子元素在控制器中定义一个"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

的on click处理程序上的some_active变量。

如果你不想这样做，其他的解决方案是使用

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

其中"active:someActive"将是一个在作用域中定义的函数，它遍历子菜单树，并在某些选项处于活动状态时返回true或false。

这取决于你的布局和你是喜欢通知还是脏检查

Answer 2

我将创建一个作用域函数，它接受所讨论的链接:

$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