ng-change radio button angularjs

Creando un array con ng-model al seleccionar la casilla de verificación

Question

Soy nuevo en angularjs y quiero crear la matriz del modelo cuando hago clic en la casilla de verificación y debajo está mi código ...

$scope.selectedAlbumSongs = [{
''name'': ''song1'',
''url'': ''http://test/song1.mp3''
}, {
''name'': ''song2'',
''url'': ''http://test/song2.mp3''
}, {
''name'': ''song3'',
''url'': ''http://test/song3.mp3''
}];
$scope.playList = {};

HTML:

<fieldset data-role="controlgroup">
<legend>Select songs to play</legend>
<label ng-repeat="song in selectedAlbumSongs">
<input type="checkbox" name="{{song.url}}" id="{{song.name}}" ng-model="playList[song.url]">
<label for="{{song.name}}">{{song.name}}</label>
</label>
</fieldset>

El código anterior actualiza la lista de reproducción como se muestra a continuación cuando hago clic en la casilla de verificación

{
"http://test/test1.mp3": true,
"http://test/test2.mp32": true,
"http://test/test3.mp3": false
}

Pero quiero crear el modelo ng en el siguiente formato y eliminar el objeto cuando la casilla de verificación no esté seleccionada (por ejemplo, si se desmarca la canción3, el objeto song3 eliminado de la matriz). ¿Puedes decirme cómo puedo escribir esta lógica?

Esperado:

[{
name: "song1",
url: "http://test/song1.mp3"
}, {
name: "song2",
url: "http://test/song2.mp3"
}]

Answer 1

Puedes hacerlo así:

$scope.selectedAlbumSongs = [ { ''name'': ''song1'', ''url'': ''http://test/song1.mp3'' }, { ''name'': ''song2'', ''url'': ''http://test/song2.mp3'' }, {''name'': ''song3'', ''url'': ''http://test/song3.mp3'' }];
$scope.selectedSongs = function () {
$scope.playList = $filter(''filter'')($scope.selectedAlbumSongs, {checked: true});
}

Luego, simplemente llame a selectedSongs () cuando se cambie la selección:

<input type="checkbox" name="{{song.url}}" id="{{song.name}}" ng-model="song.checked" ng-change="selectedSongs()">

Ver demo here