javascript - 将类添加到单击的导航链接的 AngularJS ng-click 函数

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>

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