将活动类添加到使用字体超棒图标的列表项的正确方法是什么?我正在使用ui.router和ui-sref-active =“ active”添加类,但是我似乎找不到正确的方法来添加CSS。

HTML是:

<nav id="sidebar2-pullout">
    <ul class="list-unstyled sidebar2-nav">
        <li><a ui-sref-active="active" ui-sref="navHome">Home</a></li>
        <li><a ui-sref-active="active" ui-sref="navEvaluation">Evaluations</a></li>
        <li><a ui-sref-active="active" ui-sref="navQuestions">Questions</a></li>
        <li><a ui-sref-active="active" ui-sref="navPrerequisites">Prerequisites</a></li>
        <li><a ui-sref-active="active" ui-sref="navDocuments">Documents</a></li>
    </ul>
</nav>


和的CSS是

    ul.sidebar2-nav li a {
  color: #2A7FCE;
  cursor: pointer;
  text-decoration: none;
}
ul.sidebar2-nav li a:hover {
  color: #000;
  cursor: pointer;
  text-decoration: none;
}
ul.sidebar2-nav li:before {
  font-family: 'FontAwesome';
  content: '\f00c';
  margin:0 5px 0 -15px;
  color: #2A7FCE;
  background: white;
}
ul.sidebar2-nav li:before .active {
  font-family: 'FontAwesome';
  content: '\f00c';
  margin:0 5px 0 -15px;
  color: #000;
  background: grey;
}

最佳答案

您将使用ng-class指令。它像这样工作

<li><a ui-sref-active="active" ng-class="{active: selectedListItem}" ui-sref="navDocuments">Documents</a></li>


其中“ selectedListItem”是作用域上的属性,并设置为true。该位置上任何评估为true的内容都将导致将active设置为类。如果将$ scope.selectedListItem = false设置为有效,则将删除活动类。

这是一个示例,其中我在角度范围内具有属性,该属性设置为字符串以指示哪个项目处于活动状态。

http://jsfiddle.net/JULxK/

在每个项目上,如果属性与该项目的关键字匹配,则ng-class指令会将类设置为active。

通常,当我做这样的事情时,我喜欢使用ng-repeat指令生成列表,并使用$ scope.selectedNavIndex。
在每个项目上,我都会放置ng-class =“ {active:selectedNavIndex == $ index}”

$ index是在ng-repeat内部隐式可用的变量,该变量等于重复元素的索引。要将活动类从一项更改为另一项,只需设置$ scope.selectedNavIndex =3。您可以从控制器执行此操作,甚至可以使用ng-click =“ selectedNavIndex = $ index”

关于css - 在angularJS中为字体很棒的列表项添加事件类,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24662447/

10-09 17:57
查看更多