sub ng-repeats, getting (checked) checkbox values in angular

Question

I have some nested ng-repeats I am working with and the third level down is a grouping of checkboxes. Initially I am sent an array of options for the checkboxes so I do this:

<div class="fadingOptionsHere" ng-repeat="fading in fade.options">
    <input type="checkbox" ng-model="fadingsHere" value="{{fading.id}}">{{fading.name}}
</div>

I am tyring to find a way to ONLY get the values of the selected checkboxes back. It would be super ideal if I could just replace the nested options array with an array of only the selected items, so I could just send the json object back like that.

This is the third level down of nesting so I'm having trouble tracking these guys. How would I be able to get only the selected values (as the fading.id) of the select boxes for each iteration of the ng-repeat?

I keep trying to reference the fadingsHere model with no success.

Thanks!

you can't pass primitive variables to ng-model when it is nested in child scopes. Read up on scopes and inheritance and understand why it is important to always use an object property in ng-model — charlietfl
– charlietfl, Commented Sep 9, 2014 at 1:40

Seminda · Accepted Answer · 2014-09-09 01:12:16Z

2

You can do this in this way.

In HTML do like below.

<ul>
    <li data-ng-repeat="record in records">
        <input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}
    </li>
</ul>

And in controller you have to add selected property.

function MyCtrl($scope) {
 $scope.records = [ { "Id": 1, }, { "Id": 2 }, { "Id": 3 } ];
 $scope.selected = {};
 $scope.ShowSelected = function() {
    return $scope.selected 
};

When you read the selected property you will get the selected list.

Demo

answered Sep 9, 2014 at 1:12

Seminda

1,77312 silver badges16 bronze badges

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

1 Comment

Francis Kim Over a year ago

awesome way to handle it

Raman Singh · Accepted Answer · 2014-10-31 11:41:54Z

2

you could use checklist model directive like

      <input type="checkbox" class="form-control"
                           checklist-model="transaction.jobData[attribute.key]"
                           checklist-value="checkBoxAttributes.code">

answered Oct 31, 2014 at 11:41

Raman Singh

817 bronze badges

Collectives™ on Stack Overflow

sub ng-repeats, getting (checked) checkbox values in angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related