Question

将活动类添加到使用字体真棒图标的列表项的正确方法是什么？我正在使用ui.router和ui-sref-active =＆＃34; active＆＃34;添加课程，但我似乎无法找到添加CSS的正确方法。

HTML Is：

<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;
}

Answer 1

您将使用ng-class指令。它的工作原理如此

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

where＆＃34; selectedListItem＆＃34;是作用域上的属性并设置为true。在那个地方评估为true的任何东西都会导致active被设置为一个类。如果设置$ scope.selectedListItem = false，则将删除活动类。

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

http://jsfiddle.net/JULxK/

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

通常当我做这样的事情时，我喜欢用ng-repeat指令生成我的列表并且有一个$ scope.selectedNavIndex。在每个项目上，我会把ng-class =＆＃34; {active：selectedNavIndex == $ index}＆＃34;

$ index是ng-repeat中隐式可用的变量，它等于重复元素的索引。要将活动类从一个项目更改为另一个项目，您只需设置$ scope.selectedNavIndex = 3.您可以从控制器执行此操作，甚至可以使用ng-click =＆＃34; selectedNavIndex = $ index＆＃34; < / p>

将活动类添加到angularJS中的字体真棒列表项

1 个答案: