How To Get Only Selected Checkboxes In Angularjs?

I have ng-repeated 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:

Solution 1:

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

<divdata-ng-controller="MyCtrl"><ul><lidata-ng-repeat="record in records"><inputtype="checkbox"ng-model="selected[record.Id]"> {{record.Id}}
        </li></ul><ahref="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.

Solution 2:

I believe the best way would be to add property 'isSelected' to your record and bind to that value. Something like this:

<inputtype="checkbox" ng-model="record.isSelected">

another thing you can do (specially if you 'cannot' add that extra property to the record, would be to maintain an array of selected items and add/remove them from the selected array when the user makes the selection:

<inputtype="checkbox" ng-change="recordSelected(result)" ng-true-value="{{record.id}}" ng-false-value="{{-record.id}}" ng-model="result">

The recordSelected function will be handled in your controller to add/remove and record from the selected records list.

PS: I used a negative record id to represent the record was unselected.

Share