將活動類添加到angularJS中的字體真棒列表項目

將活動類添加到列表中使用字體真棒圖標的項目的正確方法是什麼？我使用ui.router和ui-sref-active =「active」來添加類，但我似乎無法找到正確的方式來添加CSS。將活動類添加到angularJS中的字體真棒列表項目

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

來源

2014-07-09 jmccommas

什麼觸發活躍的班級？ – tymeJV

你會使用納克級的指令。它的工作原理是這樣的

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

其中「selectedListItem」是範圍上的屬性並設置爲true。任何在那個評估爲真的地方都會導致主動被設置爲一個班級。如果你設置$ scope.selectedListItem = false，那麼活動類將被刪除。

下面是一個示例，其中我對角度範圍有一個屬性，我將其設置爲字符串以指示哪個項目處於活動狀態。

http://jsfiddle.net/JULxK/

上的每個項目，納克級指令類設置爲積極的，如果物業該項目的關鍵字匹配。

通常當我做這樣的事情時，我喜歡用ng-repeat指令生成我的列表並且有一個$ scope.selectedNavIndex。在每個項目上，我會把ng-class =「{active：selectedNavIndex == $ index}」

$ index是一個在ng-repeat內隱式可用的變量，它等於重複元素的索引。要將活動類從一個項目更改爲另一個項目，您可以簡單地設置$ scope.selectedNavIndex = 3.您可以從控制器或甚至使用ng-click =「selectedNavIndex = $ index」來執行此操作。

來源

2014-07-09 19:46:44 Hippocrates

謝謝！現在完美運作。我錯過了一塊拼圖 – jmccommas

很高興我能幫上忙。請在有機會時接受我的回答，以便得到積分。謝謝！ – Hippocrates

將活動類添加到angularJS中的字體真棒列表項目

回答

相關問題