2012-12-21 17 views
14

ここで私は、動的に、私はNG-モデルのタイプの値を設定したいng-repeat例えばanglejsのng-modelに動的に値を与える方法は?

<div ng-repeat="type in types"> 
    <input type="checkbox" ng-model="{{type}}" />{{ type }} 
</div> 

を使用してHTML要素を生成しています。

function DynamicController($scope) { 
    $scope.types = [ 
     "typeOne", 
     "typeTwo", 
     "typeThree"   
    ]; 
    $scope.typeValues = {}; 
}; 

<div ng-app ng-controller="DynamicController"> 
    <div ng-repeat="type in types"> 
     <input type="checkbox" ng-model="typeValues[type]" ng-click="show()" /> {{ type }} 
    </div> 

    <h3>Values</h3> 
    <div ng-repeat="type in types"> 
     {{ type }} : {{ typeValues[type] }} 
    </div> 
</div> 

を次のようにあなたは$スコープのプロパティの1つに動的な値を格納することができ、それが可能であるか、他の私は、この

<div ng-repeat="type in types"> 
    <input type="checkbox" ng-model="{{type}}" ng-true-value="{{type}}" />{{ type }} 
</div> 

答えて

11

NG-repeatが、各タイプ/アイテム/反復の子スコープを作成するので、私たちはむしろ、子スコープよりも、親スコープで各タイプのNG-モデルを関連付ける必要があります。 $ scope.typesは@アレックスの答えのように定義されている場合は、その後、

<input type="checkbox" ng-model="$parent[type]">{{ type }} 

性質typeOnetypeTwo、対応するチェックボックスがある場合typeThreeは、親スコープに表示されます。それを行う1つの方法は$親を使用することですプロパティの値はtrueになります。チェックボックスを再度クリックするとプロパティが残り、値はfalseに切り替わります。したがって、コードでは、存在しないプロパティと、値がtrueまたはfalseに設定されているプロパティをチェックする必要があります。それはちょっと面倒です。

Iは、各オブジェクトタイプ(名前)、それが選択されているかどうかを示すブールを有する親スコープ、上のオブジェクトの配列を事前定義することを好むだろう。

$scope.types = [ 
    {name: 'typeOne', selected: false}, 
    {name: 'typeTwo', selected: false}, 
    {name: 'typeThree', selected: false}]; 

そして、$を(「タイプ」の値は、親オブジェクトへの参照ではなく、親プロパティの(プリミティブ)値のコピーになりますので)親は必要ありません。

<input type="checkbox" ng-model="type.selected">{{ type.name }} 

はNGについての詳細を学ぶためにWhat are the nuances of scope prototypal/prototypical inheritance in AngularJS?も参照してください。 - 反復子と子スコープ

+0

スコープ内で関数を使用する場合、 '$ parent.myFunc()'も連鎖され、パラメータに '$ parent.myFunc(val).cost'が渡されます –

8

のようなNG-真の価値のためにそのタイプの値を設定したいですスコープのtypeValuesプロパティを使用して値を確認できます。

var i, 
    length = $scope.types.length; 

for (i = 0; i < length; i++) { 
    console.log($scope.types[i] + " : " + $scope.typeValues[$scope.types[i]]); 
}    
関連する問題