Angular에서 ng 스타일 및 백분율 값을 사용하여 HTML 요소 너비 설정JS

Angular에서 ng 스타일 및 백분율 값을 사용하여 HTML 요소 너비 설정JS

백분율 값을 포함하는 JSON 응답 개체가 있습니다.예를 들어 다음과 같습니다.

{
    completionPercent: 42
}

제가 목표로 하는 UI 결과는 다음과 같습니다.

┌──────────────────────────────────────────────────┐
|█████████████████████                             |
└──────────────────────────────────────────────────┘

JSON 오브젝트는,ng-model각 요소 중 하나입니다.이 시점에서, I want to bind the private.completionPercent각 JS의 요소의 너비로 표시됩니다.단, CSS는width스트링과 같은 것을 기대하다'42%', 번호가 아닙니다.따라서 다음 기능은 작동하지 않습니다.

<div id="progressBackground" ... >
    <div id="progressBar"
         ng-model="..."
         ng-style="{ 'width': completionPercent }"
         ... ></div>
</div>

현재 컨트롤러에서 전체 스타일을 생성하여 다음과 같은 작업을 수행하고 있습니다.

ng-style="getStyleFromCompletionPercent()"

그러나 이것은 좋은 생각이 아니다. 왜냐하면 이 시스템을 확장하기가 매우 어렵기 때문이다.ng-style폭(%)을 암묵적으로 지정하는 다른 방법이 있습니까?다음과 같은 것이 이상적입니다.

ng-style="{ 'width-percentage': completionPercent }"

ng-style 속성 내의 코드는 javascript 객체이므로 폭 값의 끝에 퍼센트 기호를 추가할 수 있습니다.문자열을 숫자에 추가할 때 너비 값도 문자열로 변환됩니다.

<div id="progressBackground" ... >
    <div id="progressBar"
         ng-model="..."
         ng-style="{ 'width': completionPercent + '%' }"
         ... ></div>
</div>

또 다른 방법은

[style.width.%]="completionPercent"

고객님의 코드로

<div id="progressBackground" ... >
<div id="progressBar"
     ng-model="..."
     [style.width.%]="completionPercent"
     ... ></div>

검색자의 편의를 위해 영역을 채우고 마지막에 약간의 공간을 남겨야 하는 경우(예를 들어 텍스트 세부 정보를 제공하는 경우) 다음과 같은 코드를 사용하여 이 작업을 수행할 수 있습니다.

<div ng-style="{'width': 'calc('+completionPercent+'% - 250px)'}">&nbsp;</div>

이 기능은 CSS3 준거 브라우저에서만 동작하지만 동적으로 확장성이 우수합니다.

Angular JS Application(각 JS 애플리케이션)에서 워처를 피하고 싶은 경우.다음 구문을 사용할 수 있습니다.

1. Pixels -  [style.max-width.px]="value" 
2. EM - [style.max-width.em]="value"
3. Percent - [style.max-width.%]="value" 

언급URL : https://stackoverflow.com/questions/24947156/setting-html-element-width-using-ng-style-and-percentage-value-in-angularjs