AngularJS：使用 ng-repeat 制作复选框答案

【问题标题】：AngularJS: make checkboxes with ng-repeatAngularJS：使用 ng-repeat 制作复选框
【发布时间】：2016-11-11 10:17:47
【问题描述】：

我试图弄清楚为什么我的复选框列表（来自 ng-repeat="song in 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}}

以下是控制器中每种流派的歌曲：

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-repeat 中，如果选中则选中：true。但是歌曲的名字没有出现在我有 {{song.song}}

的地方

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

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>

【讨论】：

【解决方案2】：

需要进行两项更改。首先，使用 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>

【讨论】：