AngularJS：オブジェクトのプロパティをngModelにバインドする

Question

私は、値のリストを与え、リスト内の各値に対してinput[number]のフィールドを表示するフォームコンポーネントを作っています。
問題は数値プリミティブではなくオブジェクトのリストだから、入力と各オブジェクトの数値プロパティとの間のデータバインディングを確立するには良い方法が必要です。
この番号プロパティは、コンポーネントのスコープ属性を介して動的に設定されます。

私のデータは、以下の

$scope.ngModelList = [{foo: 'bar', num: 1}, {foo: 'baz', num: 3}]; 

ようになり、私たちはに結合することになるだろう、オブジェクトのプロパティが固定されるかと仮定した場合、私の入力は（多少この

<div class="inputs" 
    data-ng-repeat="model in ngModelList"> 

    <input type="number" 
     data-ng-model="model"> 

</div> 

Answer 1

のように見えますそれほど有用ではない）、あるいはそれが常に存在することが必要な場合、答えはやや単純です。

私たちのディレクティブの属性の1つとしてプロパティ名が必要です。 ngModelPropertyであり、以下の溶液を有する。

directive("multiNumberForm", function() { 
    return { 
     scope: { 
      ngModelList: "=", // Array<Object> of models to bind to 
      ngModelProperty: "@" // Property of each Object for actual binding 
     } 
     ... 
    } 
}; 

そして、我々のテンプレートで

<div class="inputs" 
    data-ng-repeat="model in ngModelList"> 

    <input type="number" 
     data-ng-model="model[ngModelProperty]"> 

</div> 

我々は、具体的ngModelProperty: "@?"、ngModelPropertyはオプションになりたい場合は、解決策はそれほど単純である場合。
解決策が見つかるとすぐに回答を投稿します。

Answer 2

<div class="inputs" 
    data-ng-repeat="model in ngModelList"> 

    <input type="number" 
     data-ng-model="{{ model.foo }}"> 

</div> 

何かのような？

Answer 3

あなたがngModelとしてmodel.numを使用する場合、それはその特定のモデルのnum属性に結合する2つの方法になります

<div class="inputs" data-ng-repeat="model in ngModelList"> 
    <input type="number" data-ng-model="model.num"> 
</div> 

を使用することができます。