how to handle checked checkbox in angularjs

Question

in normal html form, you submit a form and you have access to array of check box in server side , but in angular there is no form post , and we have view model , what we have to do is to post Id of selected entities to server side method, here is how normally handle selected check box for batch operation

here is my check box in ng-repeat loop

     <tr  ng-repeat="meeting in vm.meetings" class="odd gradeX">
         <td>
            <input type="checkbox" class="group-checkable icheck" ng-click="vm.selectMeeting(meeting)"/>
        </td>

and here is my function in angularjs controller

 function selectMeeting(meeting) {
        var index = -1;

//check to see if user has check or uncheckd the check box 
        for (var i = 0; i < vm.meetingSelected.length; i++) {

            if (vm.meetingSelected[i].indexOf(meeting.id) > -1) {
                index = i;
            }

        }
//if checked add it to vm.meetingSelected array
        if (index == -1) {
            vm.meetingSelected.push(meeting.id)
        }


//if unchecked remove it form   vm.meetingSelected array
        else {
            vm.meetingSelected.splice(index, 1);
        }

    }

i Dont like this code actully , i think there should be better way to select checked check box in angularjs.

any suggestion for better way to handle check box in angularjs ? thanks

Kyle · Accepted Answer · 2016-05-25 13:44:53Z

2

You can use ngModel with checkboxes.

<input type="checkbox" ng-model="vm.meetingSelected[$index]" />

You can pass in $index, or any object that keeps track of your ngRepeat. It all depends on context.

Perhaps....

<input type="checkbox" ng-model="vm.meetingSelected[meeting.name]" />
<input type="checkbox" ng-model="vm.meetingSelected[meeting.id]" />

So when you're ready to process your model:

//only grab the selected meetings === true
for(var key in vm.meetingSelected) {
    if(vm.meetingSelected[key] === true)
        mySelectedMeetings.push(vm.meetingSelected[key]);
}

Or.... pass the whole thing and let your backend take care of grabbing only the true selected meetings.

edited May 25, 2016 at 13:44

answered May 25, 2016 at 13:36

Kyle

5,6077 gold badges38 silver badges48 bronze badges

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

5 Comments

Arash Over a year ago

this doesn't work because it doesnt remove selected meeting from vm.meetingSelected when user uncheck the check box, it just set its value to false

Arash Over a year ago

$index ? i want to pass if id of selected meeting .

Kyle Over a year ago

What does your model look like?

Kyle Over a year ago

See edit. You can pass in anything you like. It all depends on context.

Arash Over a year ago

this is fine solution

Collectives™ on Stack Overflow

how to handle checked checkbox in angularjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related