单选按钮不适用于 UiBootstrap

Question

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

DEMO

您可以看到示例 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

这对我有用，在一行中尝试这种方法而不使用按钮：

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

Answer 3

btn-group 分类元素期望它的子元素是按钮（btn 分类元素）。不是div 元素。取出div 并将ng-repeat 移动到实际按钮。现在，如果您希望按钮垂直对齐，您需要使用btn-group-vertical 而不是btn-group，如bootstrap documentation 中所述。这是更新代码：

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

更新的 Plunker：http://plnkr.co/edit/kVFqNAXisMgkMVqy0WAF?p=preview