将活动类添加到使用字体超棒图标的列表项的正确方法是什么?我正在使用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/