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?
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));
};
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"
<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);
}
