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."
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.
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.
Selon la solution suggérée: https://jsfiddle.net/rcy63v7t/7/
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
.
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.
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.