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

Khanh TO · Accepted Answer · 2013-10-16 14:03:29Z

4

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.

edited Oct 16, 2013 at 14:03

answered Oct 16, 2013 at 13:12

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

Comments

gnom1gnom · Accepted Answer · 2013-10-16 10:32:25Z

1

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>

answered Oct 16, 2013 at 10:32

gnom1gnom

7527 silver badges15 bronze badges

2 Comments

Sol Over a year ago

but i want to get access to checkbox_1 not checkbox[1]? where is ng_true_value of it?

Sol Over a year ago

for examle i want to do this <p>You selected {{checkboxes[1].value+' '+checkboxes[2].value}}</p> and user should see this "You selected text2 text4"

Collectives™ on Stack Overflow

angularjs accessing ng-repeat checkbox

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related