AngularJS：让与NG-重复复选框

Question

我想为什么我的复选框（从纳克重复=“歌曲myCtrl.genreSelected”）的列表中无法正确显示

弄清楚我有一些单选框在这里你可以选择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

需要两个改变。首先，使用ng-model而不是ng-checked。其次，为了查看歌曲名称，您需要将输入封装在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>