각도 값 템플릿에 클래스 값 설정

Question

저는 아주 간단한 Angular 초심자입니다.

내 응용 프로그램에서 양식의 읽기 전용 버전에 사용되는 템플릿이 있습니다. '진행 중'오렌지 - - 녹색 '연체'- 빨간색

등이 템플릿은 값을 기준으로 (텍스트/배경 색상) 스타일 될 상태 필드, 예를 들어

'새 문제를'표시 ...

내 CSS는 다음과 유사합니다.

.status-bar {padding: 3px; border: solid 1px #333} 
.new-issue {background-color: orange; color: #000} 
.in-progress {background-color: green; color: #fff} 
.overdue {background-color: red; color: #fff} 

문제 상태 필드는 컨트롤러를 통해 사용할 수 있으며이 코드를 사용하여 표시합니다.

<div class="status-bar">{{issue.status}}</div> 

모두 정상적으로 작동합니다.

그때 나는 순진하게도 간단하게 표현으로 클래스 이름을 삽입하려고

, 예를 들면 나에게 출력의이 종류를 줄 것이다

<div class="status-bar {{issue.status}}">{{issue.status}}</div> 

생각 ..

<div class="status-bar overdue">overdue</div> 

하지만 그렇지 않은 작업. ng-class 지시문 및 기타 옵션을 살펴 보았지만이를 해결할 수는 없습니다.

이상적으로는 값에 따라 클래스 이름을 추가/삽입 할 수있는 솔루션이 필요합니다 (ng 클래스와 같이 true/false가 아님). 그래서 ... 다음처럼되고

<div class="status-bar in-progress">In Progress</div> 

또는

<div class="status-bar new-issue">New Issue</div> 

또는

<div class="status-bar overdue">overdue</div> 

등 ...

의 범위 내 oputput HTML을하고 싶습니다 상태 값이 변경되어 위의 패턴에 따라 클래스 이름을 계산해야합니다.

,210

예컨대,

<div class="status-bar another-status">Another Status</div> 

그래서 나는 하이픈 내 issue.status 값을 소문자 다음 클래스 이름으로 추가하는 방법이 필요합니다. 나는 지시어가 앞으로 나아갈 수있는 방법이라고 생각합니다. 그래서 다른 뷰에서 사용할 수 있습니다.

jQuery 등의 사실 이후에 이렇게하기가 쉽지만 ... 'Angular'방식으로 볼 수는 없습니까?! 제공하는 도움을 선행

많은 감사합니다 ... 당신을 위해 무엇을 찾고있는 것은 아마도 http://docs.angularjs.org/api/ng/directive/ngClass입니다

Answer 1

ng-class은 당신이 ...

무엇을 찾고

여기 JS

app.filter('titleCase', function() { 
    return function (input) { 
    var words = input.split('-'); 
    for (var i = 0; i < words.length; i++) { 
     words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1); 
    } 
    return words.join(' '); 
    } 
}); 

및

<h1 ng-class="class1">{{class1 | titleCase}}</h1> 

은 ...

Answer 2

.또한 작업을해야 AngularJS ngClass conditional

Answer 3

NG 수준을보고 할 수 있습니다 :

<div class="status-bar" ng-class="issue.status">{{issue.status}}</div> 

근무 바이올린하십시오 사용자 정의 필터와 http://jsfiddle.net/w2SFr/2/