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}}
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.