なぜ入力がng-repeatで正しく機能しないのですか

Question

この単純な例では、現在選択されているラジオボタンを取得できない理由を説明できますか？私はng-repeatディレクティブでラジオボタンを動的に生成しようとしており、ng-modelを使って現在のラジオボタンを選択しています。

テンプレート：：

<div ng-repeat="kind in movieKinds"> 
    <input type="radio" name="movies" ng-value="kind" ng-model="kindSelected"> {{kind.name}}<br> 
</div> 
Selected Movie :{{kindSelected}} 

はコントローラー：このように

mymodule.controller('MainCtrl', [ '$scope',function ($scope) { 

    $scope.movieKinds = [ 
     {'name' : 'Action', 'movies' : ['Action#1', 'Action#2', 'Action#3']}, 
     {'name' : 'Comedy', 'movies' : ['Comedy#1', 'Comedy#2', 'Comedy#3']}, 
     {'name' : 'Drama', 'movies' : ['Drama#1', 'Drama#2']}, 
     {'name' : 'Horror', 'movies' : ['Horror#1']} 
    ]; 

}]); 

Answer 1

それはどこng-repeatディレクティブ上のテンプレートを繰り返したときにng-repeatは、各反復で（prototypically継承）新しい子スコープを作成しないため配置されています。

ng-repeatが新しいprototypically継承された子スコープを作成するときに何が起こりますか？

子スコープでは、子のスコープを作成しながら、親スコープ値 に更新子スコープ値に&その逆を更新するよう&オブジェクト 値はその符号を取られるprimitive プロパティの初期値が取られているすべてのプロパティを運びます。ここではあなたのケースではあなたはとてもそのスコープ変数がng-repeatスコープ内で作成してしまったng-repeat内ng-model="kindSelected"変数を持っていたし、ng-repeatディレクティブの外に利用できない

。 ng-modelを定義しながら、ng-modelを定義しながら、あなたはDot ruleをたどることができるようにあなたがobject使用することができ、このような問題を解決するには

。つまり、$scope.modelという名前のオブジェクトをコントローラ&内に定義してからkindSelectedプロパティを追加すると、チェックボックスの選択時に値が更新されます。

マークアップ

<div ng-repeat="kind in movieKinds"> 
    <input type="radio" name="movies" ng-value="kind" ng-model="kindSelected"> {{kind.name}}<br> 
</div> 
Selected Movie :{{model.kindSelected}} 

コード

$scope.model = {}; 

---

この問題を解決する他の方法は、スコープ階層関連するようにコントローラのエイリアスを使用するcontrollerAs構文を使用することです問題はHTMLでは発生しません。どちらのコントローラー変数を使用するにしても、そのコントローラーの別名を使用することができます。

Answer 2

Pankaj Parkar's answerを指すように、ng-repeatは独自の$有効範囲を作成します。 $ parent $スコープを参照する必要があります。

あなたはが値チェックを取得する次のような構成を使用することができます。developer033 @

<input type="radio" name="movies" ng-value="kind" ng-model="$parent.kindSelected"> {{kind.name}}<br>