angularjs访问ng-repeat复选框

时间:2013-10-16 09:35:34

标签: javascript angularjs

我正在进行ng-repeat以从数组中输出复选框。

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

当用户将其设置为true时,如何访问checkbox1值'text2'? TY

2 个答案:

答案 0 :(得分:4)

你想要这样的东西吗?

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

DEMO

或者使用ng-repeat动态执行:

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

DEMO

用于分离关注点和使用MVI结构(如angularjs)的正确方法。您 不应该 直接访问您的DOM复选框以获取其检查状态和文本,而是访问模型。

答案 1 :(得分:1)

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

BTW - 调试我建议使用

<pre>{{checkboxes | json}}</pre>