angularjs accessing ng-repeat checkbox

Question

I'm doing ng-repeat to output checkboxes from array.

<div class="row-fluid">
    <label ng-repeat="checkbox_ in checkboxes" class="checkbox"
        for="checkbox_{{$index}}">
            <input name="checkbox_{{$index}}" id="checkbox_{{$index}}"
                ng-model="checkbox_.checked"
                ng-true-value="{checkbox_.value}"
                type="checkbox">
            {{checkbox_.text}}
    </label>
</div>

data

$scope.checkboxes = [
    {"text": "text1", checked:false},
    {"text": "text2", checked:false},
    {"text": "text3", checked:false},
    {"text": "text4", checked:false}
];

After that i want to get access to checkbox_1 for example...

<hr>
checkbox_1.checked - {{checkbox_1.checked}}<br>
checkbox_1.value - {{checkbox_1.value}}<br>
checkboxes[1].checked - {{checkboxes[1].checked}}<br>
checkboxes[1].value - {{checkboxess[1].value}}<br>checkbox_1.value - {{checkbox_1.value}}<br>

<div ng-show="checkboxes[1].checked">on</div>

And nothing happens http://jsfiddle.net/MQzGP/3/

How to get access to checkbox1 value 'text2' when user sets it true? ty

Answer 1

Do you want something like this?

you selected <span ng-show="checkboxes[0].checked"> {{checkboxes[0].text}}</span> 
<span ng-show="checkboxes[1].checked"> {{checkboxes[1].text}}</span>

DEMO

Or do it dynamically using ng-repeat:

you selected <span ng-repeat="checkbox_ in checkboxes" ng-show="checkbox_.checked"> {{checkbox_.text}}</span> 

DEMO

For separation of concerns and the correct way to work with MVC structure like angularjs. You should not access your DOM checkboxes directly to get its checked state and text, access the models instead.

Answer 2

Your code is fine - except arrays in JS are indexed from 0 not 1. So you should have checkboxes[0].checked instead.

BTW - to debug I suggest to use

<pre>{{checkboxes | json}}</pre>