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

Question

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

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

这是菜单 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级，就没有$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')}