Angular Get Selected CheckBoxes

Question

I have a list of dynamically filled checkboxes using angular.

 <div ng-repeat="X in XList">
     <label>{{X.Header}}</label>
     <input type="checkbox" name="X" value="{{X.Item.Id}}" />
     <p>{{X.Header}}</p>
 </div>

I want a method to retrieve a list of all the selected checkboxes. Usually I'd use

 $('input[name=checkboxlist]:checked').each(function()
{
}

But this is not acceptable with angular .... So is there an appropriate Method to do so?

Curettage

Answer 1

here is the implemented plunker

 <input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}

 $scope.ShowSelected = function() {
  console.log($scope.selected);
  alert(JSON.stringify($scope.selected));
};

Lazybones

It's awesome, but when I check one of the checkboxes, This message occur: Error: can't convert undefined to object – Curettage

i'm not getting what you are trying to say, can you elaborate in which condition you are getting error ? i do not see any error while selecting checkboxes. – Lazybones

Yes, at your code it works great, but when I added the "ng-model = selected[]" at my code, when I try to select one of the checkboxes, I receive that error. – Curettage

Can you update your code in your question or make a plunker or fiddle just for a clear understanding – Lazybones

i can just make out you must be missing to write $scope.selected = {}; in the beginning of controller – Lazybones

I'm sorry, There is something that I can't understand. Why does the Selected appear as Id : State, If I want to select the first selected element for example, how can I do it ? – Curettage

the selected appears as Id : state because of this preparation ng-model="selected[RQuestion.Id]" in check box and as far as selecting first selected is considered you have to do it in bit different way i have made plunker here plnkr.co/edit/Fbth4FMpssCHcODRJEgx?p=preview hope it helps you!..... – Lazybones

Thanks, but it doesn't show results, it displays The $scope.selected as an empty list, & the id : undefined. – Curettage

this is not working answer because when you uncheck check box it will remain in collection . – Stere

Answer 2

You can use the ng-model directive to directly bind a property to the element.

e.g.

<input type="checkbox" ng-model="X.Item.Id" />

This will update your model.

From this you will be able just to check the values within your model and see which are checked.

e.g.

angular.forEach($scope.yourModelItems, function(item){
    // item.value ? 0 : 1;
});

Check out the documentation for ngModel. Also the ToDo list example on the angularjs.org homepage demonstrates this.

p.s. On a side note, you can also make your angular directives html5 friendly by adding data- before. e.g. data-ng-model="X.Item.Id"

Dalessio

Thanks a lot , would it be possible if you mentioned the checking method ? – Curettage

You would need to post the code of your model so I could see the values. – Dalessio

How is yourModelItems populated? – Outherod

Answer 3

<tr ng-repeat="x in numbers" >
<td><input type="checkbox"  ng-model="selected[x.id]"></td>`<tr ng-repeat="x in numbers" >

then button for action

 <button ng-click="get_all_cheked()">Get checked</button>    

and then in controller

 $scope.selected = {};
 $scope.get_all_cheked=function () {
 console.log("click");
 console.log($scope.selected);
 }

Uncoil