Erstellen von Array mit ng-Modell bei der Checkbox Auswahl

Question

Ich bin neu in AngularJS und will das Modell Array erstellen, wenn ich das Kontrollkästchen klicken und unten ist mein Code ..

$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> 

die Aktualisierung der Playlist obigen Code wie unten dargestellt, wenn ich das Kontrollkästchen klicken

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

Aber ich will die ng-Modus erstellen l im folgenden Format, und entfernen Sie das Objekt, wenn das Kontrollkästchen deaktiviert ist (z. B. Wenn das Kontrollkästchen Song3 deaktiviert wird, wird das Objekt song3 aus dem Array entfernt. Kannst du mir sagen, wie man diese Logik schreiben kann?

Erwartet:

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

Answer 1

Sie es wie folgt tun:

$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}); 
} 

Dann einfachen Aufruf selectedSongs(), wenn die Auswahl geändert wird:

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

Siehe Demo here