La création d'un tableau avec les ng-modèle lors de la case de sélection

Je suis nouveau sur angularjs et souhaitez créer le modèle de tableau lorsque je clique sur la case ci-dessous mon 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>

Le code ci-dessus la mise à jour de la liste de lecture comme indiqué ci-dessous lorsque je clique sur la case à cocher

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

Mais je veux créer la ng-modèle dans le format ci-dessous, et la suppression de l'objet lorsque la case n'est pas cochée (par ex. si l'décochez la song3, le song3 objet supprimée à partir du tableau). Pouvez-vous me dire comment écrire cette logique?

Prévu: 

[{
    name: "song1",
    url: "http://test/song1.mp3"
}, {
    name: "song2",
    url: "http://test/song2.mp3"
}]
InformationsquelleAutor user845392 | 2013-07-30
  1. 45

    Vous pouvez le faire comme ceci:

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

    Puis, le simple appel de selectedSongs() lorsque la sélection est modifiée:

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

    Voir démo ici

    • Salut @ehlers, c'est une excellente solution. Pouvez-vous me dire comment je peux faire la même chose à penser, lorsque j'ai dynamiques ngModels pour les cases à cocher à l'intérieur d'un ngRepeat? Par exemple, dans un cas comme celui-ci où j'ai un song.id comme ngmodel pour chaque case: <input type="checkbox" name="{{song.url}}" id="{{song.name}}" ng-model="song.id" ng-change="selectedSongs()">. J'ai remarqué que le code ci-dessus ne fonctionne que lorsque, ayant ng-model="song.checked". Mais quand j'ai une dynamique ngmodel "song.id", il ne marche pas. Aucune solution de contournement dans ce cas plz?
    InformationsquelleAutor ehlers