AngularJS Bootstrap 单选按钮组

Question

AngularJS Bootstrap 单选按钮组

6

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

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，则“送货”按钮应处于活动状态，如果该值为false，则“自取”按钮应处于活动状态。

我尝试像这样做：

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

但是那个也有同样的问题。有人知道我怎么可以根据我的值选择按钮吗？

- r3plica

你能创建 Plunker 吗？ - Ubiquitous Developers

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shamal Perera · Accepted Answer

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

演示