AngularJS访问ng-repeat复选框

angularjs accessing ng-repeat checkbox

本文关键字：复选框 ng-repeat 访问 AngularJS      更新时间：2023-09-26

我正在执行ng重复以从数组输出复选框。

<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>

数据

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

之后，我想访问checkbox_1例如...

<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>

什么也没发生http://jsfiddle.net/MQzGP/3/

当用户将复选框1值

设置为true时，如何访问该复选框1值"text2"？

你想要这样的东西吗？

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

演示

或者使用 ng-repeat

（ng-repeat）动态执行：

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

演示

用于关注点分离和使用 MVC 结构（如 angularjs）的正确方法。您不应该直接访问您的 DOM 复选框来获取其选中的状态和文本，而是访问模型。

你的代码很好 - 除了 JS 中的数组是从 0 而不是 1 索引的。所以你应该有复选框[0].check。

顺便说一句 - 调试我建议使用 

<pre>{{checkboxes | json}}</pre>
相关文章：