AngularJS：NG-の繰り返しで作るのチェックボックス

Question

（「myCtrl.genreSelectedで歌」NG・リピート=から）チェックボックスの私のリストが正しく

を示していない理由を私はいくつかのラジオボックスを持って把握しようとしていますどこに3曲のジャンルの一つを選択することができます

<input type="radio" name="genre" ng-value="myCtrl.rockSongs" ng-model="myCtrl.genreSelected"> Rock  
<input type="radio" name="genre" ng-value="myCtrl.rapSongs" ng-model="myCtrl.genreSelected"> Pop 
<input type="radio" name="genre" ng-value="myCtrl.popSongs" ng-model="myCtrl.genreSelected"> Rap 

をそして私はそれらの曲の名前のチェックボックスのリストを作成するために選択された方のラジオたい：ここ

<input type="checkbox" name="song" ng-repeat="song in myCtrl.genreSelected" ng-checked={{song.checked}}>{{song.song}} 

の中の歌ですコントロール各ジャンルのLER：

this.rockSongs = [{song: "Rock song #1", checked: true}, 
        {song: "Rock song #2", checked: false}, 
        {song: "Rock song #3", checked: false}, 
        {song: "Rock song #4", checked: false}, 
        {song: "Rock song #5", checked: false}]; 

this.rapSongs = [{song: "Rap song #1", checked: false}, 
       {song: "Rap song #2", checked: false}, 
       {song: "Rap song #3", checked: false}, 
       {song: "Rap song #4", checked: false}, 
       {song: "Rap song #5", checked: false}]; 

this.popSongs = [{song: "Pop song #1", checked: false}, 
       {song: "Pop song #2", checked: false}, 
       {song: "Pop song #3", checked: false}, 
       {song: "Pop song #4", checked: false}, 
       {song: "Pop song #5", checked: false}]; 

は今、私は負荷に登場​​するロックの曲を持っている：

this.genreSelected = this.rockSongs; 

は今、チェックボックスの一覧がチェックすると、選択し、チェックしてNGリピートから表示されます：真。しかし、私の所には曲の名前が表示されません。{{song.song}}

Answer 1

2つの変更が必要です。まず、ng-checkedではなくng-modelを使用します。次に、曲名を表示するには、divに入力をラップし、ng-repeatをdivに移動する必要があります。

<div ng-repeat="song in myCtrl.genreSelected"> 
    <input type="checkbox" name="song" ng-model='song.checked'>{{song.song}} 
</div> 

Answer 2

ngRepeatディレクティブは、その要素を繰り返し、その結合あなた{{song.song}}はngRepeatの外に実際にあります。

あなたが入力し、別の要素で結合をラップし、代わりに

<div ng-repeat="song in myCtrl.genreSelected"> 
    <input type="checkbox" name="song" ng-checked="song.checked"> {{song.song}} 
</div> 

または双方向結合用ngModelとすることを繰り返す必要があります。

<div ng-repeat="song in myCtrl.genreSelected"> 
    <input type="checkbox" name="song" ng-model="song.checked"> {{song.song}} 
</div> 

を