Impostazione dell'ampiezza dell'elemento HTML utilizzando lo stile ng e il valore percentuale in AngularJS

Question

Ho un oggetto risposta JSON che contiene un valore percentuale. Per esempio:

{ 
    completionPercent: 42 
} 

Il risultato interfaccia utente che sto puntando è:

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

L'oggetto JSON viene utilizzato come ng-model di un elemento in AngularJS. Ora voglio legare lo completionPercent come larghezza di un elemento in AngularJS. Ma i CSS width si aspettano una stringa come '42%', non un numero. Così il seguente non funziona:

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

Attualmente, ho questo lavoro generando l'intero stile nel controller:

ng-style="getStyleFromCompletionPercent()" 

Ma questa non è una buona idea, in quanto diventa molto difficile estendere il ng-style. C'è un altro modo per specificare implicitamente che la larghezza è in percentuale? Qualcosa di simile a questo sarebbe l'ideale:

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

Answer 1

Il codice all'interno del tuo attributo ng-stile è un oggetto JavaScript, così si potrebbe aggiungere un simbolo di percentuale sulla fine di voi valore della larghezza. Mentre si aggiunge una stringa a un numero, converte anche il valore della larghezza in una stringa.

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

Answer 2

A vantaggio dei ricercatori, se è necessario riempire l'area, ma lasciare un po 'di spazio alla fine (per esempio, per fornire dettagli testuale), questo potrebbe essere realizzato con qualcosa di simile al seguente codice:

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

Ovviamente, questo funzionerebbe solo con i browser conformi a CSS3, ma è scalabile in modo dinamico.