Angular, getting index of checked checkbox (or radio) in ng-repeat

Question

I am creating a set of forms with ng-repeat, each form has a checkbox(might change to radio if that matters) and I am trying to manipulate the specific level that is checked. So what I am trying to do is pass the index of the checkbox (the index of itself within the ng-repeat. Let me show you what I mean

<div class="saInstrcutionTableRow"  ng-repeat="parent in listTable track by $index">
                        <div class="saInstrcutionLeft"></div>
                        <!-- parent levels -->
                        <div  class="saInstrcutionCRight saInstrcutionTitle"><div class="parentSub1"> <input type="checkbox" ng-model="levelPicker">{{parent.name}}</div></div>

                        </div>

                    </div>

So here I'm just repeating the name with the input under the ng-model="levelPicker". I am pushing a button outside of this which uses a function that I've set up that would only need to pass the checkbox's index within the repeat so it's like this -

<button type="button" class="resultsButton" ng-click="submitNewSub(Checkbox index here)">Submit</button>

Is there some way in angular to target the checked checkbox and get its index within the repeat? I am using this to add children within it. I've tried a few things but i'm not sure how to refer to it directly and get it's index (within angular). Any input would be much appreciated. Thanks!!

Answer 1

You could capture the selected index withsomething like this

<input type="checkbox" ng-change="onChange({{$index}})" ... />

onChange function

  $rootScope.onChange = function(idx) {
    $rootScope.selectedIndex = idx;
  };

Then use selectedIndex for whatever you need. Here's a quick example

Answer 2

ng-repeat creates a new scope for each item, so the parent can't directly access the 'levelPicker' set by any of the checkBoxes.

Most correct way is probably something like this:

$scope.listTable = [
    { name : 'a', selected: false },
    { name : 'b', selected: false },
    { name : 'c', selected: false }
];
$scope.selectMe = function ( index, previousValue ) {
    $scope.listTable[index].selected = !previousValue;
};
$scope.submitNewSub = function () {
    for ( var i=0; i<$scope.listTable.length; i++ ) {
        console.log($scope.listTable[i].name+
            ($scope.listTable[i].selected ?
                ' is selected' :
                ' is not selected')
        );
    }
}

With this in the html:

<input type="checkbox" ng-click="selectMe($index, levelPicker)" ng-model="levelPicker">{{parent.name}}

Or you can look at all the child scopes and check their levelPicker values:

$scope.submitNewSub = function () {
    for(var cs = $scope.$$childHead; cs; cs = cs.$$nextSibling) {
        console.log($scope.listTable[cs.$index].name+
            (cs.levelPicker ?
                ' is selected' :
                ' is not selected')
        );
    }
};