web-dev-qa-db-fra.com

Définition de la largeur de l'élément HTML à l'aide du style ng et de la valeur de pourcentage dans AngularJS

J'ai un objet de réponse JSON qui contient une valeur en pourcentage. Par exemple:

{
    completionPercent: 42
}

Le résultat de l'interface utilisateur que je vise est:

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

L'objet JSON est utilisé comme ng-model d'un élément dans AngularJS. Maintenant, je veux lier le completionPercent comme largeur d'un élément dans AngularJS. Mais CSS width attend une chaîne comme '42%', pas un nombre. Donc, ce qui suit ne fonctionne pas:

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

Actuellement, cela fonctionne en générant le style entier dans le contrôleur:

ng-style="getStyleFromCompletionPercent()"

Mais ce n'est pas une bonne idée, car il devient très difficile d'étendre le ng-style. Existe-t-il une autre façon de spécifier implicitement que la largeur est en pourcentage? Quelque chose comme ça serait idéal:

ng-style="{ 'width-percentage': completionPercent }"
javascriptcssjsonangularjsdata-binding
41
metacubed

Le code dans votre attribut de style ng est un objet javascript, vous pouvez donc ajouter un symbole de pourcentage à la fin de votre valeur de largeur. Lorsque vous ajoutez une chaîne à un nombre, il convertira également la valeur de largeur en chaîne.

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

Pour le bénéfice des chercheurs, si vous aviez besoin de remplir la zone, mais de laisser un peu d'espace à la fin (par exemple, pour fournir des détails textuels), cela pourrait être réalisé avec quelque chose de similaire au code suivant:

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

Évidemment, cela ne fonctionnerait qu'avec les navigateurs compatibles CSS3, mais cela évolue bien dynamiquement.

6
HockeyJ

Dans le cas où vous voudriez éviter d'observer dans Angular Application JS. Nous pourrions utiliser la syntaxe suivante:

1. Pixels - [style.max-width.px] = "valeur"
2. EM - [style.max-width.em] = "valeur"
3. Pourcentage - [style.max-width.%] = "Valeur"

0
Sachin Mishra

Une autre façon d'y parvenir est

[style.width.%]="completionPercent"

Dans votre code

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