각도 데이터 바인딩 여러 클래스

Question

정수 '0-100'을 반환하는 변수 'LoadPercentage'를 가진 컨트롤러가 있습니다.이 컨트롤러는 진행률 막대를 움직입니다. 로드 진행률이 하나 인 클래스를 제공 할 것을 기대하고있었습니다 : progress-75 또는 그와 비슷한 사용자.

<div class="progress-bar progress-20 progress-100"> 
    <div class="completed-bar"></div> 
</div> 

여러 클래스가 분명히 첫 번째 클래스가 추가로 진행 표시 줄이 시점에서 붙어되기 위해 발생하는 추가 있습니다

<div class="progress-bar progress-{{controller.LoadPercentage}}"> 
    <div class="completed-bar"></div> 
</div> 

그러나 같은 다양한 결과를 얻을 수 있습니다. 이 예에서는 20 %입니다.

첫 번째 off - 두 번째 클래스가 바인딩되는 이유는 무엇입니까? 나는 이것을 일으키는 어떤 각성 행동이 있다고 추측하고있다. 그러나 나는 그것과 관련된 어떤 것도 온라인으로 찾을 수 없다.

두 번째로,이를 달성하는 방법이 있습니까? ng-class로 할 수있는 방법을 찾을 수 없으며 가능한 클래스 수가 ng-class 조건에 추가하려는 것보다 큰 숫자 클래스를 추가하는 예제를 찾을 수 없습니다.

Answer 1

당신이해야 할 일은 필요한 값을 결정하고 적절한 클래스를 반환하는 자신의 식으로 ng-class를 사용하는 것입니다.

또한 범위에서 바로 기본 (문자열, 숫자, 부울)에 직접 바인딩하지 마십시오. 항상 도트 표기법을 사용하여 항목을 참조하십시오 : 예를 들어 스코프에 직접 저장된 값 대신.

그렇지 않으면 바인딩 오류가 발생하여 여러 개의 클래스와 같은 문제가 발생할 수 있습니다.

참조 문서 : https://docs.angularjs.org/api/ng/directive/ngClass