如何在angularjs中检查条件下的ckeck框

时间:2016-12-16 11:30:59

标签: javascript html angularjs

我正在尝试根据student.ispresent显示我的复选框作为检查,但它不起作用,即checkedng-checked不一致。

<div class="col-sm-6" ng-repeat = 'student in vm.students'>
    <div class="form-group">
        <label class="control-label col-sm-6">
            {{student.name}}{{student.ispresent}}
        </label>
        <div class="btn-group col-sm-6" data-toggle="buttons">
            <label class="btn btn-white" ng-click="vm.checkValues(student.id,'Yes')">
                <input type="radio" name="" value="" autocomplete="off" ng-checked="student.ispresent ==='Yes' "> Yes
            </label>
            <label class="btn btn-white" ng-click="vm.checkValues(student.id,'No')">
                <input type="radio" name="" value="" autocomplete="off" ng-checked="student.ispresent ==='Yes' "> No
             </label>
        </div><!--btn-group col-sm-6-->
    </div><!--form_group-->
</div><!--//col-sm-6-->

2 个答案:

答案 0 :(得分:1)

您错过了在复选框控件中设置ng-model

<label class="btn btn-white" ng-click="vm.checkValues(student.id,'Yes')">
   <input type="radio" name="" value="" autocomplete="off" ng-model="StudentYes" ng-checked="student.ispresent ==='Yes' "> Yes
</label>
<label class="btn btn-white" ng-click="vm.checkValues(student.id,'No')">
   <input type="radio" ng-model="StudentNo" name="" value="" autocomplete="off" ng-checked="student.ispresent ==='Yes' "> No
</label>

并请ng-click event而不是check box

致电label

答案 1 :(得分:1)

您应该使用ngModel指令以及ngTrueValuengFalseValue,请参阅docs

<input type="checkbox" 
     ng-model="student.ispresent" 
     ng-true-value="Yes" 
     ng-false-value="No" />

注意:似乎不需要ng-click

DEMO