CODEWITHSUNDEEP
javascriptangularjs
Sol
Sol

Reputation: 337

angularjs accessing ng-repeat checkbox

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

Upvotes: 2

Views: 7020

Answers (2)

Khanh TO
Khanh TO

Reputation: 48982

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.

Upvotes: 4

gnom1gnom
gnom1gnom

Reputation: 752

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>

Upvotes: 1

Related Questions