web-dev-qa-db-ja.com

AngularJS-フィールドのラベルテキストを取得する

質問

フィールドのラベルを取得するAngularJSの「ベストプラクティス」の方法は何かと思っていました。 jQueryでは、 "label for"クエリを使用してクエリを実行し、テキストを抽出します。 AngularJSを使用してこの方法でこれを行うことは可能ですが、何かが正しくないと感じます。

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

コントローラの内部は非常に単純です：

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

基本的に、出力の_myField.label_に "My spoon is too too。"を入力します。

私が今やっていること

私が今行っているのは、jQuery方法論（$("label[for='MyField']")）と同様にデータをプルするクエリを実行することだけです。次に、それが存在しない場合は、プレースホルダーテキストを取得しています。動作しますが、少しオーバーヘッドのようです。

私が達成しようとしていること

カスタムフォーム検証をいくつか行い、ラベルをメッセージに含めたいと思います。ラベルテキストをプルするだけで、非常に一般的に書き込めるので、ゲームの後半でi18nデータを動的に切り替える人を心配する必要がありません。

Fiddle

提案されたソリューションごと： https://jsfiddle.net/rcy63v7t/7/

angularjsformsangularjs-scopelabels
6
el n00b

HTMLを次のように変更します。

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

そしてあなたのJSを以下に：

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

その後、その値を簡単に取得/設定できます。

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

新しいAngularJSのベストプラクティスでは、フィールド参照で常に「ドット」を使用する必要があることに注意してください。あなたが次のようなことをした場合、それはここに完全に適合します：

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

とJS：

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

その後、いつでも簡単に$scope.myField.labelと$scope.myField.valueにアクセスできます。

10
Chad Robinson

コントローラーに次のようなスコープ変数があるとしましょう

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

そしてあなたのテンプレートは

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

このフィールドによって、ラベルは動的に表示されます。要件に応じて、入力フィールドにカスタム検証を適用します。

私はあなたが何を望んでいるかを正確に理解してほしいと思います。

3
Satyam Koyani

ラベルテキストを入力titleに入力するだけで、「＃」ディレクティブを使用できます。これを使用して、ラベルIDを確実に一致させることもできます。

<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はngModelです。 myfield_controlは、入力コントロールへの参照です。

0
Carter Medlin