单选按钮和复选框的数据绑定

最新推荐文章于 2021-02-28 00:39:51 发布

原创最新推荐文章于 2021-02-28 00:39:51 发布 · 4.4k 阅读

4 ·

CC 4.0 BY-SA版权

AngularJS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在AngularJS中实现单选按钮和复选框的数据绑定。对于单选按钮，只需设置value和ng-model即可将数据绑定到对象。而对于复选框，可以通过ng-click来处理选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单选按钮：

<div class="radio" ng-repeat="authMode in EnumItems.authModeSwitch">
                                                    <label>
                                                        <input type="radio" id="inputAuthModeSwitch" name="inputAuthModeSwitch"
                                                               ng-model="secProfile.authConfig.authModeSwitch" value="{{authMode.id}}">
                                                        <span class="text">{{authMode.name}}</span>
                                                    </label>
                                                </div>

只要设置value和ng-model , 单选按钮就绑定到数据对象了.

复选框：

<pre name="code" class="javascript"> <div class="col-lg-3 col-sm-3 col-xs-6" ng-repeat="val in filterValues">
            <div ng-class="{'checkbox':widget!='radio', 'radio':widget=='radio'}">
                <label>
                    <input type="checkbox" ng-model="isChecked" ng-click="onCheckboxChecked(isChecked, val)"  ng-true-value="1" ng-false-value="0">
                    <span class="text">{{val.name}}</span>
                </label>
            </div>
        </div>

默认情况下，绑定到复选框上的值是ture或者false。有时候，我们希望返回的其它值。Angular提供了一种非常好的处理方式：使用ng-ture-value和ng-false-value。

对复选框选中时的处理可调用ng-click.