angularJS의 멋진 글꼴 항목에 활성 클래스 추가

Question

멋진 글꼴 아이콘을 사용하는 목록 항목에 활성 클래스를 추가하는 올바른 방법은 무엇입니까? 나 ui.router 및 ui-sref-active = "active"를 사용하여 클래스를 추가했지만 CSS를 추가하는 올바른 방법을 찾지 못하는 것 같습니다.

<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 수준의 지침을 사용하다 :

되는 HTML입니다. 그것은 이렇게 작동합니다

<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 수준의 지시어는 활성으로 클래스를 설정합니다.

보통 이런 식으로 할 때 ng-repeat 지시문을 사용하여 목록을 생성하고 $ scope.selectedNavIndex를 사용하고 싶습니다. 각 항목에 ng-class = "{active : selectedNavIndex == $ index}"를 입력합니다.

$ index는 반복 요소의 인덱스와 동일한 ng-repeat에서 암시 적으로 사용할 수있는 변수입니다. 활성 클래스를 하나의 항목에서 다른 항목으로 변경하려면 $ scope.selectedNavIndex = 3을 설정하면됩니다. 컨트롤러에서 또는 ng-click = "selectedNavIndex = $ index"로도 수행 할 수 있습니다.