it-swarm.com.de

AngularJS - Beschriftungstext für Feld abrufen

Frage

Ich habe mich gefragt, was die bewährte Methode von AngularJS ist, ein Label für ein Feld zu bekommen. Mit jQuery fragen Sie einfach mit einer "label for" -abfrage ab und extrahieren dann den Text. Mit AngularJS ist dies zwar möglich, aber etwas fühlt sich einfach nicht richtig an.

Angenommen, Sie haben so etwas in Ihrem HTML-Code:

<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>

Der interne Controller ist ziemlich einfach:

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

Grundsätzlich möchte ich den myField.label in der Ausgabe mit "Mein Löffel ist zu groß." Füllen.

Was mache ich jetzt?

Alles, was ich gerade mache, ist das Ausführen einer Abfrage, die die Daten ähnlich der jQuery-Methode ($("label[for='MyField']")) abruft. Wenn das nicht existiert, ziehe ich nur den Platzhaltertext. Es funktioniert, aber es scheint ein bisschen mehr Aufwand.

Was ich versuche zu erreichen

Ich möchte eine benutzerdefinierte Formularüberprüfung und möchte das Label in die Nachricht aufnehmen. Ich muss nur den Beschriftungstext ziehen, damit ich ihn extrem generisch schreiben kann und mich nicht darum kümmern muss, dass die I18n-Daten später dynamisch im Spiel ausgetauscht werden.

Fiddle

Gemäß der vorgeschlagenen Lösung: https://jsfiddle.net/rcy63v7t/7/

6
el n00b

Sie ändern Ihren HTML-Code wie folgt:

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

und deine JS an Folgendes:

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

dann können Sie den Wert später genauso einfach abrufen/einstellen:

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

Beachten Sie, dass neue AngularJS-Best Practices immer die Verwendung eines "Punktes" in einer Feldreferenz erfordern. Es würde perfekt hier passen, wenn Sie so etwas tun würden:

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

und JS:

$scope.myField = {
    value: '',
    label: 'My spoon is too big:'
};

Dann können Sie jederzeit einfach auf $scope.myField.label und $scope.myField.value zugreifen.

10
Chad Robinson

Nehmen wir an, Sie haben in Ihrem Controller eine Bereichsvariable wie 

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

und deine Vorlage ist wie

<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>

Durch dieses Feld wird das Label dynamisch kommen. Wenden Sie die benutzerdefinierte Überprüfung im Eingabefeld an.

Hoffe ich verstehe genau was du willst.

3
Satyam Koyani

Geben Sie einfach Ihren Beschriftungstext in die Eingabe title ein und Sie können eine "#" Direktive verwenden. Sie können dies auch verwenden, um sicherzustellen, dass die Label-ID übereinstimmt.

<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 ist dein ngModel. myfield_control ist ein Verweis auf Ihre Eingabesteuerung.

0
Carter Medlin