web-dev-qa-db-fra.com

AngularJS - récupère le texte de l'étiquette pour le champ

Question

Je me demandais quelle était la "meilleure pratique" d'AngularJS pour obtenir un label pour un champ. Avec jQuery, il vous suffit d'interroger à l'aide d'une requête "label for", puis d'extraire le texte. Bien qu’il soit possible de le faire de cette façon avec AngularJS, quelque chose ne va pas du tout.

Supposons que vous avez quelque chose comme ça 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.';

En gros, je veux remplir le myField.label dans la sortie avec "Ma cuillère est trop grosse."

Ce que je fais maintenant

Tout ce que je fais à présent est d’exécuter une requête qui extrait les données de la même manière que la méthodologie jQuery ($("label[for='MyField']")). Ensuite, si cela n’existe pas, je tire simplement le texte de substitution. Cela fonctionne, mais cela ressemble à un peu de frais généraux.

Ce que j'essaie d'accomplir

Je veux une validation de formulaire personnalisée et je veux inclure l'étiquette dans le message. Je dois juste extraire le texte de l'étiquette pour pouvoir l'écrire de manière extrêmement générique et ne pas avoir à m'inquiéter du passage dynamique des données i18n dans le jeu.

Fiddle

Selon la solution suggérée: https://jsfiddle.net/rcy63v7t/7/

angularjsformsangularjs-scopelabels
6
el n00b

Vous modifiez votre code HTML comme suit:

<label for="MyField">{{ myFieldLabel }}</label>
<input type="text" size="40" id="MyField" ng-model="myField" />

et votre JS à ce qui suit:

$scope.myFieldLabel = 'My spoon is too big:';

plus tard, vous pourrez obtenir/définir sa valeur aussi facilement:

if ($scope.myFieldLabel === 'My spoon is too big:') {
    $scope.myFieldLabel = 'New label:';
}

Notez que les nouvelles pratiques recommandées par AngularJS exigent de toujours utiliser un "point" dans une référence de champ. Cela irait parfaitement ici si vous faisiez 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:'
};

Ensuite, vous pouvez toujours accéder facilement à $scope.myField.label et $scope.myField.value.

10
Chad Robinson

Disons que dans votre contrôleur, vous avez une variable de portée telle que 

$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 dynamiquement. Appliquez une validation personnalisée dans le champ de saisie selon vos besoins.

J'espère que je comprends exactement ce que vous voulez.

3
Satyam Koyani

Il suffit de mettre le texte de votre étiquette dans l'entrée title et vous pouvez utiliser une directive "#". Vous pouvez également l'utiliser pour vous assurer que l'identifiant d'étiquette correspond.

<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 de saisie.

0
Carter Medlin