17

ng-repeatここでは、たとえばを使用して動的にhtml要素を生成しています

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

ng-model の type 値を設定したいです。それは可能ですか、そうでなければ、このように ng-true-value にそのタイプの値を設定したいです

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

2 に答える 2

12

ng-repeatは、タイプ/アイテム/反復ごとに子スコープを作成するため、各タイプのng-modelを、子スコープではなく親スコープに関連付ける必要があります。これを行う1つの方法は、$parentを使用することです。

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

$ scope.typesが@Alexの回答のように定義されている場合、対応するチェックボックスをクリックすると、プロパティtypeOne、、、が親スコープに表示され、プロパティの値はになります。チェックボックスをもう一度クリックすると、プロパティはそのままになり、値はに切り替わります。したがって、コードは、存在しないプロパティと、値がtrueまたはfalseに設定されたプロパティが存在するかどうかを確認する必要があります。それは少し厄介です。typeTwotypeThreetruefalse

親スコープでオブジェクトの配列を事前定義することをお勧めします。各オブジェクトのタイプ（名前）と、選択されているかどうかを示すブール値は次のとおりです。

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

その場合、$ parentは必要ありません（「type」の値は、親プロパティの（プリミティブ）値のコピーではなく、親オブジェクトへの参照になるため）。

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

AngularJSのスコープのプロトタイプ/プロトタイプの継承のニュアンスは何ですか？も参照してください。ng-repeatスコープと子スコープの詳細については、こちらをご覧ください。

于 2012-12-22T02:31:54.890 に答える
8

次のように、動的な値を $scope のプロパティの 1 つに格納できます。

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>

次に、スコープの typeValues プロパティを介して値を確認できます。

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

for (i = 0; i < length; i++) {
    console.log($scope.types[i] + " : " + $scope.typeValues[$scope.types[i]]);
}
于 2012-12-21T13:10:29.303 に答える