AngularJS Bootstrap单选按钮组

发布时间：2020-12-17 06:46:29 所属栏目：安全来源：网络整理

导读：我正在尝试使用此处的教程设置一个单选按钮组： https://angular-ui.github.io/bootstrap/ 所以在我看来我创造了这个： div class="form-group" div class="btn-group" label class="btn btn-primary" ng-model="controller.selectedLines[0].forDelivery"Fo

我正在尝试使用此处的教程设置一个单选按钮组：

https://angular-ui.github.io/bootstrap/

所以在我看来我创造了这个：

<div class="form-group">
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="controller.selectedLines[0].forDelivery">For delivery</label>
        <label class="btn btn-primary" ng-model="!controller.selectedLines[0].forDelivery">For collection</label>
    </div>
</div>

我的问题是我无法选择按钮.
在他们的例子中,他们对每个按钮都有不同的布尔值,但是我必须共享布尔值,所以如果布尔值为true,那么按钮“For delivery”应该是活动的,如果值为false则那么“For collection”应该是积极点.

我尝试这样做：

<div class="form-group">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default" ng-class="active: controller.selectedLines[0].forDelivery === true">
            <input type="radio" name="optionsRadios" ng-model="controller.selectedLines[0].forDelivery" ng-value="true" ng-change="deliveryController.requestDeliveryDate(controller.order,controller.selectedLines)"> For delivery
        </label>
        <label class="btn btn-default" ng-class="active: controller.selectedLines[0].forDelivery === false">
            <input type="radio" name="optionsRadios" ng-model="controller.selectedLines[0].forDelivery" ng-value="false" ng-change="deliveryController.requestDeliveryDate(controller.order,controller.selectedLines)"> For collection
        </label>
    </div>
</div>

但那有同样的问题.
有谁知道如何根据我的价值选择按钮？

解决方法

参考 https://angular-ui.github.io/bootstrap/中给出的例子

<div class="btn-group">
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>

当radioModel =’Left’时,左按钮被选中.

至于您的方案,缺少一些选项.这是工作代码

<div class="btn-group">
    <label class="btn btn-primary" ng-model="mode" btn-radio="'Delivery'">For delivery</label>
    <label class="btn btn-primary" ng-model="mode" btn-radio="'Collection'">For collection</label>
</div>

Demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!