单选按钮不适用于 UiBootstrap

Question

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

您可以看到示例 1 上的 css 运行良好。当你点击按钮时，按钮的状态改变（按下）

举个例子 2 我不能这样做。 在我的应用程序上，我需要 "radio button" 出现在垂直线上（我明白了）。

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

<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

btn-group 分类元素期望它的子元素是按钮（btn 分类元素）。不是 div 元素。取出 div 并将 ng-repeat 移至实际按钮。现在，如果您希望按钮垂直对齐，则需要使用 btn-group-vertical 而不是 bootstrap documentation 中所述的 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>

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

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

我得到了最终版本，这就是我需要的

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>

单选按钮不适用于 UiBootstrap

Radio button don't work with UiBootstrap

html

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap