Question

这次我需要帮助这个例子：

您可以看到示例 1 上的css运行良好。当您单击按钮时，按钮的状态会发生变化（按）

例如 2 我不能这样做。 在我的应用上我需要“单选按钮”出现在垂直行上（我明白了）。

但是当我按下按钮时，当我点击我回到第一个状态（不要按）

<h4>Exmaple 2</h4>
<div class="btn-group" data-toggle="buttons-radio">

    <div class="row" ng-repeat="company in vm_login.decimals">

        <button type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
            {{company.desc}}
        </button>

    </div>
</div>

任何人都可以帮助我吗？

Answer 1

我有一个最终版本，这就是我需要的方式

<强> DEMO

全部谢谢

<div class="btn-group-vertical" >
    <button ng-repeat="value in vm_login.options"
            class="btn btn-primary"
            type="button"
            ng-model="vm_login.model"
            btn-radio="value.id">
        {{value.desc}}
    </button>
</div>
<p>texto aqui: {{vm_login.model}}</p>

Answer 2

btn-group分类元素期望它的子节点是按钮（btn分类元素）。不是div元素。取出div并将ng-repeat移至实际按钮。现在，如果您希望按钮与Verticaly对齐，则需要使用btn-group-vertical而不是btn-group中所述的<div class="btn-group-vertical" data-toggle="buttons-radio"> <button ng-repeat="company in vm_login.decimals" type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id"> {{company.desc}} </button> </div>。这是更新代码：

{{1}}

更新了Plunker：bootstrap documentation

Answer 3

这适用于我在一行中尝试这种方法而不使用按钮：

<div class="btn-group">
        <label class="btn btn-primary"  ng-repeat="company in vm_login.decimals" ng-model="radioModel"  ng-model="radioModel.id" btn-radio="company.id">{{company.desc}}</label>
    </div>

单选按钮不适用于Ui Bootstrap

3 个答案: