AngularJS - obtenir le texte de l'étiquette pour le champ

Question

Je me demandais ce que AngularJS "meilleures pratiques" d'obtenir un label d'un champ. Avec jQuery que vous venez de requête à l'aide d'un "label de" requête puis extraire le texte. Alors qu'il est possible de faire de cette façon avec AngularJS, quelque chose de juste ne se sent pas le droit à ce sujet.

Suppose que vous avez quelque chose comme ceci dans votre code HTML:

<form name="MyForm" ng-controller="Ctrl">
    <label for="MyField">My spoon is too big:</label>
    <input type="text" size="40" id="MyField" ng-model="myField" />

    <br /><br />

    You entered {{ myField }} for {{ myField.label }}
</form>

Le contrôleur interne est assez simple:

$scope.myField = 'I am a banana.';

Fondamentalement, je veux remplir le myField.label dans la sortie avec "Ma cuillère est trop grand."

Ce que je Fais Maintenant

Tout ce que je suis en train de faire maintenant est de l'exécution d'une requête qui extrait les données de façon similaire à la jQuery méthodologie ($("label[for='MyField']")). Ensuite, si cela n'existe pas, je suis simplement en tirant le texte de l'espace réservé. Il fonctionne, mais il semble comme un peu de surcharge.

Ce que je suis en train d'Accomplir

Je veux la coutume, de la validation du formulaire et je veux inclure l'étiquette dans le message. J'ai juste besoin de tirer sur le texte de l'étiquette, de sorte que je peux l'écrire très générique et puis ne pas avoir à vous soucier de personnes de commutation de données i18n dynamique, plus tard dans le jeu.

Violon

Par la solution proposée:
https://jsfiddle.net/rcy63v7t/7/

OriginalL'auteur el n00b | 2015-04-17

10

Vous modifiez votre code HTML à la suivante:
```
<label for="MyField">{{ myFieldLabel }}</label>
<input type="text" size="40" id="MyField" ng-model="myField" />
```
et votre JS à la suivante:
```
$scope.myFieldLabel = 'My spoon is too big:';
```
puis, plus tard, vous pouvez obtenir/définir sa valeur tout aussi facilement:
```
if ($scope.myFieldLabel === 'My spoon is too big:') {
    $scope.myFieldLabel = 'New label:';
}
```
Noter que de nouveaux AngularJS meilleures pratiques de l'appel pour toujours à l'aide d'un "point" dans un champ de référence. Il sied ici si vous avez quelque chose comme:
```
<label for="MyField">{{ myField.label }}</label>
<input type="text" size="40" id="MyField" ng-model="myField.value" />
```
et JS:
```
$scope.myField = {
    value: '',
    label: 'My spoon is too big:'
};
```
Alors vous pouvez toujours accéder facilement à $scope.myField.label et $scope.myField.value.

J'aime que. C'est une approche qui, aussi longtemps que les gens utilisent le code JS pour la recherche de données. Je suppose que je vais juste écrire certains d'analyse de code statique des règles qui vont et regarder pour les gens de codage en dur des étiquettes au lieu de chercher à être trop de fantaisie et de charger les données à partir de la DOM.
Voici un violon pour ça: jsfiddle.net/rcy63v7t/7
maaaa sppoooon iss tooooo gros!
hahaha cuillère est la seule chose de grand ici? Blagues à part du code!

OriginalL'auteur Chad Robinson

Disons dans votre controller, vous avez une étendue variable comme

$scope.myField = {};
$scope.myField.label = "Fruit name";

et votre modèle est comme

<form name="MyForm" ng-controller="Ctrl">
    <label for="MyField">{{myField.label}}</label>
    <input type="text" size="40" id="MyField" ng-model="myField.value" />
    <br /><br />
    You entered {{ myField.label }} for {{ myField.label }}
</form>

Par cette étiquette de champ viendra de façon dynamique. Appliquer la coutume de validation dans le champ de saisie selon votre condition.

Espère que je comprends exactement ce que tu veut.

OriginalL'auteur Satyam Koyani

0

Il suffit de mettre votre texte de l'étiquette dans l'entrée title et vous pouvez utiliser un "#" de la directive. Vous pouvez également l'utiliser pour assurez-vous que l'id de l'étiquette allumettes.
```
<label for="{{myfield_control.id}}">{{myfield_control.title}}</label>
<input type="text" size="40" id="MyField" ng-model="myField" title="My spoon is too big:" #myfield_control >

<br /><br />

You entered {{ myField }} for {{ myfield_control.title }}
```
myField est votre ngModel. myfield_control est une référence à votre contrôle d'entrée.

OriginalL'auteur Carter Medlin

Vous devez vous connecter pour publier un commentaire.