Multiple checkbox selection for list in angularjs

Question

I have list of products and each product having list of students. I have product JSON to display; Within that product JSON I another JSON for student:

[{"CustId":7191,"CFirstName":"Kynan"},{"CustId":29689,"CFirstName":"Pete"},{"CustId":29690,"CFirstName":"Gina"},{"CustId":29692,"CFirstName":"Jo"}]

I want to add checkboxes for each student and for each product.

Here is what i have done for each product:

<span ng-repeat="customer in productVM.product.Customers">
                        <label class="checkbox-inline" style='margin-left:0px !important; margin-right: 10px !important; '>
                            <input class="options" ng-model="customer.CustId" type='checkbox' name="selectedStudent[]"
                                   value="{{customer.CustId}}" ng-checked="selection.indexOf(customer.CFirstName) > -1" ng-click="toggleSelection(customer.CFirstName)">
                            {{customer.CFirstName}}
                        </label>
                    </span>

Angular code:

 $scope.selection = [];
$scope.toggleSelection = function toggleSelection(customerName) {
    var idx = $scope.selection.indexOf(customerName);

    // is currently selected
    if (idx > -1) {
        $scope.selection.splice(idx, 1);
    }

        // is newly selected
    else {
        $scope.selection.push(customerName);
    }
};

I have two problems: 1. Whenever I click on any checkbox of a product; similar checkbox for all product gets checked(similar when I unchecked). 2. How I can get value of selected checkboxes.

krutkowski86 · Accepted Answer · 2016-07-18 13:09:43Z

1

You need to define unique id attribute on input element.

ng-model https://docs.angularjs.org/api/ng/directive/ngModel - value is not necessary for default use of checkboxes... just define new field in customer object (for example customer.checked) and bind it to ng-model directive.

<span ng-repeat="customer in productVM.product.Customers">
    <label for="{{customer.CustId}}" class="checkbox-inline" style="margin-left:0px !important; margin-right: 10px !important;">
        <input id="{{customer.CustId}}" class="options" ng-model="customer.checked" type="checkbox" name="customerCheck" ng-click="toggleSelection($index)"/>
        {{customer.CFirstName}}
    </label>
</span>

edited Jul 18, 2016 at 13:09

answered Jul 18, 2016 at 12:31

krutkowski86

1,0839 silver badges16 bronze badges

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

1 Comment

SandipIntrop Over a year ago

Thanks for your reply, but this didn't make any change. I have posted answer above.

SandipIntrop · Accepted Answer · 2016-07-18 13:14:53Z

0

This worked for me:

<label class="checkbox-inline" style='margin-left:0px !important; margin-right: 10px !important; '>
                            <input class="options" ng-model="selection[productVM.product.Id].customers[customer.CustId]" type='checkbox' name="selectedStudent[]"
                                   value="{{customer.CustId}}">
                            {{customer.CFirstName}}
                        </label>

Source:

http://stackoverflow.com/questions/27148320/how-to-use-checkbox-with-nested-ng-repeat-in-angularjs

And http://jsfiddle.net/0x4396pu/1/

answered Jul 18, 2016 at 13:14

SandipIntrop

451 silver badge5 bronze badges

Collectives™ on Stack Overflow

Multiple checkbox selection for list in angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related