javascript - angularjs accessing ng-repeat checkbox - Stack Overflow

I'm doing ng-repeat to output checkboxes from array.<div class="row-fluid"><lab

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>

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744789093a4593804.html

相关推荐

  • javascript - angularjs accessing ng-repeat checkbox - Stack Overflow

    I'm doing ng-repeat to output checkboxes from array.<div class="row-fluid"><lab

    10小时前
    30

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信