web-dev-qa-db-ja.com

AngularJSでngスタイルとパーセント値を使用してHTML要素の幅を設定する

パーセンテージ値を含むJSON応答オブジェクトがあります。例えば：

{
    completionPercent: 42
}

私が目指しているUIの結果は次のとおりです。

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

JSONオブジェクトは、AngularJSの要素のng-modelとして使用されます。次に、completionPercentをAngularJSの要素の幅としてバインドします。ただし、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 }"
javascriptcssjsonangularjsdata-binding
41
metacubed

Ng-style属性内のコードはjavascriptオブジェクトであるため、幅の値の最後にパーセント記号を追加できます。文字列を数値に追加するときに、幅の値も文字列に変換されます。

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

検索者の利益のために、エリアを埋める必要があるが、末尾に少しスペースを残す場合（たとえば、テキストの詳細を提供するため）、これは次のコードのようなもので実現できます。

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

明らかに、これはCSS3準拠のブラウザーでのみ機能しますが、動的に拡張できます。

6
HockeyJ

Angular JS Applicationでウォッチャーを避けたい場合。次の構文を使用できます。

1。ピクセル-[style.max-width.px] = "value"
2。 EM-[style.max-width.em] = "value"
3。パーセント-[style.max-width。％] = "value"

0
Sachin Mishra

これを達成する別の方法は

[style.width.%]="completionPercent"

あなたのコードで

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