CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap
julioVG
julioVG

Reputation: 81

Radio button don't work with UiBootstrap

I need this time a help with this example:

DEMO

You can see that the css on example 1 goes good. When you click on the button the state of the button change (press)

On example 2 i can't do the same. on my app i need that the "radio button" appear on vertical line (i get it).

But when i press the button, when i click out i back to the first state (don't press)

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

Can anybody help me?

Upvotes: 0

Views: 2233

Answers (3)

julioVG
julioVG

Reputation: 81

I got a final version and this is how i need

DEMO

Thanks for all

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

Upvotes: 1

iH8
iH8

Reputation: 28638

The btn-group classed element expects it's children to be buttons (a btn classed element). Not a div element. Take out the div and move the ng-repeat to the actual button. Now if you want your button to align verticaly you'll need to use btn-group-vertical instead of btn-group as stated in the bootstrap documentation. Here's the update code:

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

Updated Plunker: http://plnkr.co/edit/kVFqNAXisMgkMVqy0WAF?p=preview

Upvotes: 0

Sunil Kumar
Sunil Kumar

Reputation: 1794

This worked for me try this approach in one line without using buttons:

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

Upvotes: 0

Related Questions