最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - angularjs accessing ng-repeat checkbox - Stack Overflow

programmeradmin1浏览0评论

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 /

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

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/MQzGP/3/

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

Share Improve this question edited Oct 16, 2013 at 11:02 Panos Bariamis 4,6617 gold badges39 silver badges62 bronze badges asked Oct 16, 2013 at 9:35 SolSol 3372 gold badges8 silver badges21 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 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.

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>
发布评论

评论列表(0)

  1. 暂无评论