How to get only selected checkboxes in angularjs?

angularjs, javascript

Solution

JavaScript

var app = angular.module('plunker', ['ui']);

app.controller('MyCtrl', function($scope) {
    $scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ];
    $scope.selected = {};
    $scope.ShowSelected = function() {
      $scope.records = $.grep($scope.records, function( record ) {
        return $scope.selected[ record.Id ];
      });
    };      
});

HTML

<div data-ng-controller="MyCtrl">
    <ul>
        <li data-ng-repeat="record in records">
            <input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}
        </li>
    </ul>
    <a href="javascript:;" data-ng-click="ShowSelected()">Show Selected</a>
</div>

http://plnkr.co/edit/lqtDQ6

You can store the flag in separately and use it to filter the data.

updated plunk as some CDN links were broken.

Problem

I have `ng-repeat`ed data, and am trying to get only the ones the user has selected. I'm not sure how to do it though, this is what I have: HTML: ``` <div data-ng-controller="MyCtrl"> <ul> <li data-ng-repeat="record in records"> <input type="checkbox" ng-model="record.Id"> {{record.Id}} </li> </ul> <a href="javascript:;" data-ng-click="ShowSelected()">Show Selected</a> </div> ``` JS: ``` function MyCtrl($scope) { $scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ]; $scope.ShowSelected = function() { // how can I get only the selected records here ? } } ``` I did get it working one way - by adding a `isSelected:false` property to each object and changing the `ng-model` of the checkbox to `record.isSelected`, I can then filter on that in the `ShowSelected` function. This seems inefficient though, I don't want to be adding extra properties to the model if can avoid it. Is there a better way ?

Original source