Question

我想在用户点击此项目时将isActive类添加到项目菜单，并从所有其他项目中删除isActive类。我想比较id，这是angularJS代码：

$rootScope.isActive = function(idVal, event){ 
        return idVal === event.target.id;
    }

这是Menu Html代码的一部分：

 <ul class="sidebar-nav"> 
        <li>
            <a ui-sref="" id='101' ng-class="{active: isActive($event, 101)}">
                <span class='glyphicon  glyphicon-ban-circle glyph-sidebar'></span> 
                Rules
            </a>
            <ul class='dropdown sidebar-nav-dropdown' >
                <li>
                    <a href="">Transaction Mapping</a>
                </li>
                <li>
                    <a href="">File Setup</a>
                </li>
                <li> 
                    <a href="">Code Setup</a>
                </li>   
            </ul>
        </li>
        <li>
            <a href="#" id='102' ng-class="{active: isActive($event, 102)}">
                <span class='glyphicon  glyphicon-ban-circle glyph-sidebar'></span>
                Administrative Rules
            </a>
            <ul class='dropdown sidebar-nav-dropdown'>
                <li>
                    <a ui-sref="admin.mapping-rules">Transaction Mapping</a>
                </li>
                <li>
                    <a ui-sref="admin.mapping-rules">File Setup</a>
                </li>
                <li>
                    <a ui-sref="admin.mapping-rules">Code Setup</a>
                </li>
            </ul>
        </li>

    </ul>

谢谢，

Answer 1

首先，您不应该使用根范围。您应该使用与该视图关联的控制器的范围。

其次，你的代码没有多大意义。 $ event可以用作名为...的函数的参数来响应事件：

ng-click="doSomething($event)"

但是使用ng-class，没有$ event。

您在范围内需要的只是所选菜单项的ID（或名称或标识菜单项的任何内容）：

$scope.selectedMenuItem = null;

单击某个项目时，您需要更改所选的菜单项：

ng-click="selectMenuItem(101)"

$scope.selectMenuItem(item) {
    $scope.selectedMenuItem = item;
}

然后将css类与所选菜单项相关联，只需

ng-class="{active: selectedMenuItem === 101}"

也就是说，如果您的所有链接都导航到给定的路由器状态，您甚至不需要selectedMenuItem。如果当前路由器状态是链接允许导航到的状态（假设$ state在您的范围内），则只需添加活动类：

ng-class="{active: $state.includes('admin.mapping-rules')}

将活动类添加到菜单项单击添加删除其他人

1 个答案: