AngularJS UI Bootstrap "btn-radio" directive doesn't work

Question

Could anyone explain why the first two button groups work, but the third one doesn't?

<div class="btn-group">
  <button ng-repeat="company in companies" 
          class="btn" 
          ng-model="radioModel.id" 
          btn-radio="company.id">
    {{company.name}}
  </button>
</div>

<div class="btn-group">
  <button class="btn btn-two" 
          ng-model="radioModel.id"
          btn-radio="2">
    two
  </button>
  <button class="btn btn-two" 
          ng-model="radioModel.id"
          btn-radio="3">
    three
  </button>
</div>

<div class="btn-group">
  <button ng-repeat="company in companies" 
          class="btn btn-{{ company.name }}" 
          ng-model="radioModel.id" 
          btn-radio="company.id">
    {{company.name}}
  </button>
</div>

$scope.companies = [ { id: 2, name: "two"}, {id: 3, name: "three"} ];
$scope.radioModel = { id: 3 };

This example uses AngularUI Bootstrap 0.5.0. If I change it to 0.3.0, everything works as expected.

zs2020 · Accepted Answer · 2013-08-16 15:23:22Z

7

Use ng-class. The string interpolation in class is funky.

ng-class="'btn btn-' + company.name"

edited Aug 16, 2013 at 15:23

answered Aug 16, 2013 at 15:12

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS UI Bootstrap "btn-radio" directive doesn't work

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related