How can I get all the selected objects of Checkboxes in AngularJS?

Question

I want to get all the selected objects of the checkboxes using AngularJS.

Below is my code

My view.tpl.html

<tr ng-repeat="item in itemList">
<td>
<input type="checkbox" ng-click="clickedItem(item.id)" 
       ng-model="model.controller.object"
       {{item.name}} />
</td>

My Controller

  $scope.itemList = [
{
  id:"1",
  name:"first item"
},
{
  id:"2",
  title:"second item"
},
{
  id:"3",
  title:"third item"
}
];

   $scope.selection = [];
    $scope.clickedItem = function(itemId) {
        var idx = $scope.selection.indexOf(itemId);
        if (idx > -1) {
            $scope.selection.splice(idx, 1);
        }

        // is newly selected
        else {
            var obj = selectedItem(itemId);
            $scope.selection.push(obj);
        }
    };

    function selectedItem(itemId) {
        for (var i = 0; i < $scope.itemList.length; i++) {
            if ($scope.itemList[i].id === itemId) {
                return  $scope.itemList[i];
            }
        }
    }

Here I will get all the selected items in $scope.selection. How can I get it to ng-model?

Is it possible to do like ng-model="model.controller.object = selection" since I need the selected $scope.selection to be assigned to model.controller.object

ms87 · Accepted Answer · 2014-01-28 18:43:17Z

8

If I understand correctly you want to create a checkbox and dynamically bind it to an item(s) from a list, if so this is how I would go about doing it:

$scope.modelContainer=[];
angular.forEach($scope.itemList,function(item){
  $scope.modelContainer.push({item:item,checked:false });

});

HTML:

<div ng-repeat="item in itemList">
{{item.name}} 
<input type="checkbox" ng-click="selected(item.id)"   ng-model="modelContainer[$index].checked"     />
</div>

See plunk. See the model container change in the console whenever you check a checkbox.

answered Jan 28, 2014 at 18:43

ms87

17.5k23 gold badges89 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gnik Over a year ago

This is not my case. Please read my question again. Especially last 2 lines

ms87 Over a year ago

I did read your question, but I'm telling you to take a step back and reconsider what you want to do, since what you asked for doesn't make sense :)

Hylianpuffball Over a year ago

Good answer. If you want each checkbox to have its own unique variable, then you actually need to make each variable. The method described in this answer is about as clean a way to do this as it can get.

Khasan 24-7 Over a year ago

This worked like a charm. Thanks for the answer. However, there is a bug: when unselect the checkbox after mistakenly selected, object is remaining as selected. How to fix this?

Collectives™ on Stack Overflow

How can I get all the selected objects of Checkboxes in AngularJS?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related