13

JavaScriptオブジェクトの配列を含むデータ構造がある場合、Angularを使用してその配列の特定のエントリを入力フィールドにバインドするにはどうすればよいですか？

データ構造は次のようになります。

$scope.data = {
    name: 'Foo Bar',
    fields: [
        {field: "F1", value: "1F"},
        {field: "F2", value: "2F"},
        {field: "F3", value: "3F"}
    ]
};

fields配列には、指定された構造のいくつかのインスタンスが含まれ、各エントリには属性と属性の両方がありfieldますvalue。

input？を使用して、コントロールをvalue配列エントリのフィールド属性にバインドするにはどうすればよいfield F1ですか？

<input ng-model="???"/>

を使用してすべてのフィールドをバインドできることは知っていますng-repeatが、それは私が望んでいることではありません。上記のデータは、フィールドのはるかに大きなリストからの単なる例であり、事前定義されたフィールドのサブセットを画面上のコントロールにバインドするだけです。サブセットは配列エントリの属性に基づいていませんが、ページのデザイン時に認識されます。

したがって、上記の例では、F1をページ上の1つの入力にバインドし、F2を別の入力にバインドしようとします。F3はコントロールにバインドされません。

で関数が使用された例を見てきましたが、ng-modelAngular1.1.0では機能しないようです。

入力フィールドを特定の配列エントリにバインドする別の賢い方法はありますか？

これは例のあるフィドルですが、ng-model属性で関数を使用しようとしているため機能しません：http: //jsfiddle.net/nwinkler/cbnAU/4/

アップデート

以下の推奨事項に基づくと、次のようになります。http: //jsfiddle.net/nwinkler/cbnAU/7/

4

3 に答える 3

12

私は個人的に、配列のエントリのフィールドプロパティがオブジェクトの識別子になるように配列を再編成します。うーん、その文は奇妙に聞こえるかもしれません。私が意味するのは次のとおりです。

$scope.data = {
    name: 'F1',
    fields: {
        F1: {
           value: "1F"
        },
        F2: {
           value: "2F"
        }
    }
};

値を動的にバインドする場合は、それを簡単かつ迅速に実現できます。これがあなたのフィドルを言葉にするように修正したものです。http://jsfiddle.net/RZFm6/

お役に立てば幸いです

于 2012-12-14T14:58:32.487 に答える
8

文字列の配列ではなく、オブジェクトの配列を使用できます。

HTML：

<div ng-repeat="field in data.fields">
    <input ng-model="field.val"/>
</div>

JS：

$scope.data = {
    name: 'F1',
    fields: [
        { val: "v1" },
        { val: "v2" }
    ]
};

@Flekのフィドルをここで更新しました：http：//jsfiddle.net/RZFm6/6/

編集：申し訳ありませんが、質問を正しく読んでください。配列は次のように使用できます。

<label>Bound to F1:</label>
<input ng-model="data.fields[0].value"/>

多分立ち止まって考えますが。可変数のフィールドがありますか？または、あらかじめ決められた数のフィールドを作成していますか？前者では配列を使用し、後者ではオブジェクトを使用します。

于 2013-06-01T05:50:40.727 に答える
3

これを行う1つの方法は、次のように、必要な参照をスコープに追加することです。

$scope.fieldF1 = fieldValue('F1');
$scope.fieldF2 = fieldValue('F2');

そして、それらの参照を使用します。

<input ng-model="fieldF1.value"/>
<input ng-model="fieldF2.value"/>

フィドル： http： //jsfiddle.net/cbnAU/5/

注：これ$scope.dataは静的であると想定していますが、動的である場合は、いつでも変更を監視して参照を再計算できます...

于 2012-12-14T15:01:48.023 に答える