AngularJS: make checkboxes with ng-repeat

Question

I'm trying to figure out why my list of checkboxes (from ng-repeat="song in myCtrl.genreSelected") is not showing properly

I have some radio boxes where you can select one of 3 music genres:

<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

And I want whichever radio is selected to create a list of checkboxes with the names of those songs:

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

Here are the songs in the controller for each genre:

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}];

Right now I have the rock songs to appearing on load:

this.genreSelected = this.rockSongs;

Right now the checkbox list appears from the ng-repeat with the check selected if checked: true. But the name of the song does not appear where I have {{song.song}}

zfor · Accepted Answer · 2016-07-08 19:10:14Z

3

The ngRepeat directive only repeats its element, so your {{song.song}} binding is actually outside of the ngRepeat.

You have to wrap the input and the binding in another element and repeat that instead

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

Or with two-way binding use ngModel:

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

answered Jul 8, 2016 at 19:10

zfor

3831 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jbrown · Accepted Answer · 2016-07-08 19:09:26Z

1

Two changes are needed. First, use ng-model rather than ng-checked. Second, in order to see the song names you'll need to wrap the input in a div and move the ng-repeat to the div.

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

answered Jul 8, 2016 at 19:09

jbrown

3,0351 gold badge18 silver badges22 bronze badges

Collectives™ on Stack Overflow

AngularJS: make checkboxes with ng-repeat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related