Tạo mảng với ng-mô hình khi lựa chọn hộp kiểm

Question

Tôi mới vào angularjs và muốn tạo ra các mảng mô hình khi tôi nhấp vào hộp kiểm và dưới đây là mã của tôi ..

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

Đoạn mã trên việc cập nhật danh sách như hình dưới đây khi tôi nhấp vào hộp kiểm

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

Nhưng tôi muốn để tạo ra các ng-mode l ở định dạng bên dưới và xóa đối tượng khi hộp kiểm được bỏ chọn (ví dụ: nếu bỏ chọn bài hát3, đối tượng song3 đã được xóa khỏi mảng). Bạn có thể cho tôi biết làm thế nào có thể viết logic này?

dự kiến:

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

Answer 1

Bạn có thể làm điều đó như thế này:

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

Sau đó, selectedSongs gọi đơn giản() khi lựa chọn được thay đổi:

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

Xem bản demo here