Réglage de l'élément HTML de la largeur à l'aide ng de style et de valeur, en pourcentage, dans AngularJS

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

{
    completionPercent: 42
}

L'INTERFACE utilisateur de la suite je vise est:

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

L'objet JSON est utilisé comme ng-model d'un élément dans AngularJS. Maintenant, je veux lier la completionPercent que la largeur d'un élément en AngularJS. Mais CSS width attend une Chaîne comme '42%', pas un Numéro. Donc la suite ne fonctionne pas:

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

Actuellement, j'ai ce travail, par la génération de l'ensemble de style 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. Est-il une autre façon implicite de préciser que la largeur est en pour-cent? Quelque chose comme ce serait l'idéal:

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

Donc tu ne peux pas ajouter le pourcentage de l'objet pour commencer? {"completionPercent": "42%"}
Le JSON provient d'un autre service. J'ai pu pré-processus dans le contrôleur, et d'ajouter une nouvelle Chaîne de propriété, mais je préfère laisser cela comme un dernier recours.

InformationsquelleAutor metacubed | 2014-07-25

69

Le code à l'intérieur de votre ng-l'attribut style est un objet javascript, de sorte que vous pourriez ajouter un symbole de pourcentage sur la fin de vous valeur de la largeur. Comme vous êtes ajoutant une chaîne à un nombre, il sera également convertir la valeur de la largeur d'une chaîne de caractères.
```
<div id="progressBackground" ... >
    <div id="progressBar"
         ng-model="..."
         ng-style="{ 'width': completionPercent + '%' }"
         ... ></div>
</div>
```
- Voici un violon... jsfiddle.net/L5C5Y
- Si vous vous trouvez combats Angulaire, de prendre du recul et essayer de penser à ce que vous essayez d'atteindre. Il existe de nombreuses façons de faire les choses dans angulaire, c'est vraiment de choisir ce qui convient le mieux à la situation. La connaissance viendra avec le temps et l'expérience.
InformationsquelleAutor Andrew
6

Pour le bénéfice des chercheurs, si vous avez besoin afin de remplir la zone, mais laisser un peu d'espace à la fin (par exemple, pour fournir textuelle détail), ce qui pourrait être réalisé avec quelque chose de similaire pour le code suivant:
```
<div ng-style="{'width': 'calc('+completionPercent+'% - 250px)'}">&nbsp;</div>
```
Évidemment, cela ne ferait que travailler avec CSS3 compatible navigateurs, mais elle s'adapte ainsi de manière dynamique.

InformationsquelleAutor HockeyJ

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>

InformationsquelleAutor Evita Dalmeida

Vous devez vous connecter pour publier un commentaire.