Question

我很难在angularJS应用上找到导航边栏的正确代码。应该发生的是当您单击链接时，背景颜色应突出显示活动链接。它确实按预期工作，除非您必须在突出显示之前单击每个链接两次。我做错了什么？任何帮助将不胜感激。

的javascript

 $scope.addActiveClass = function ($index) {
        $scope.addActiveClass = $index;
        var checked = $('ul.sidebar2-nav li');

        $(checked).on("click", "", function () {
            $(this).addClass('active-label');

        });
     }

HTML

<nav id="program-editor-pullout" menustate="closed" >
        <ul class="list-unstyled sidebar2-nav">
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass($index)" ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
                    </label>
                </div>
            </li>
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass($index)" ng-class="{active: evaluations}" ui-sref-active="active"  ui-sref=".evaluation">Evaluations</a>
                    </label>
                </div>
            </li>
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass($index)" ng-class="{active: questions}" ui-sref-active="active" ui-sref=".question">Questions</a>
                    </label>
                </div>
            </li>
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass()" ng-class="{active: hstranscripts}" ui-sref-active="active" ui-sref=".hstranscripts">High School Transcripts</a>
                    </label>
                </div>
            </li>
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass($index)" ng-class="{active: collegetranscripts}" ui-sref-active="active" ui-sref=".collegetranscripts">College Transcripts &amp; Course Work</a>
                    </label>
                </div>
            </li>
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass($index)" ng-class="{active: prerequisites}" ui-sref-active="active"  ui-sref=".prerequisites">Prerequisites</a>
                    </label>
                </div>
            </li>
            <li ui-sref-active="active-label">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-checked="true">
                        <a ng-click="addActiveClass($index)" ng-class="{active: documents}" ui-sref-active="active" ui-sref=".document">Documents</a>
                    </label>
                </div>
            </li>
        </ul>
    </nav>

CSS

  ul.sidebar2-nav li a.active {
   color: #000;
   cursor: pointer;
   text-decoration: none;
   }
  ul.sidebar2-nav li.active-label {
   background: whitesmoke;
  }

Answer 1

我找到了解决方案。你的例子是正确的，但在我的HTML代码中，我有这个：

<li ui-sref-active="active-label" ng-click="addActiveClass($event, $index)">
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-checked="true">
                <a ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
            </label>
        </div>
    </li>

注意锚标记如何具有ng-class和ui-sref-active。我删除了这些属性，它按预期工作。谢谢你的指导，我很感激!!

Answer 2

将点击事件从a移动到父li标记

<nav id="program-editor-pullout" menustate="closed" >
            <ul class="list-unstyled sidebar2-nav">
                <li ui-sref-active="active-label" ng-click="addActiveClass($event, $index)">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-checked="true">
                            <a ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
                        </label>
                    </div>
                </li>

将您的点击处理程序更改为此类

$scope.addActiveClass = function ($event, $index) {
        $scope.addActiveClass = $index;
        //var checked = $('ul.sidebar2-nav li');

        //$(checked).on("click", "", function () {
        //    $(this).addClass('active-label');

        //});

        $($event.target).addClass('active-label');
     }

AngularJS ng-click函数，用于为单击的导航链接添加类

2 个答案: