Angular Переключатели UI.Bootstrap действуют странно с ng-repeat

У меня есть проблема, динамически генерирующая параметры для модели радио в angular ui.bootstrap. Я думал, что могу просто ng-repeat над массивом, используя его содержимое для атрибута btn-radio, например:

//in the controller
$scope.radioModel =  undefined;
$scope.radioModelButtons = ["a", "b", "c"];

//in the html
<div class="btn-group" >
  <button ng-repeat="value in radioModelButtons"
    class="btn" type="button" ng-model="radioModel"
    btn-radio="'{{value}}'">
      {{value}}
  </button>
</div>

Я использую angular 1.1.4 и ui.bootstrap 0.3.0.

Вот jsfiddle моих усилий, как вы можете видеть, переключатели действуют независимо и не влияют на переменную radioModel.

Спасибо!

Ответ 1

Вот как вы должны написать свою разметку:

<button ng-repeat="value in radioModelButtons"
        class="btn" type="button" ng-model="radio.model"
        btn-radio="value">
          {{value}}
</button>

И рабочий jsFiddle: http://jsfiddle.net/yMLqz/2/

В вашем подходе было 2 проблемы:

  • btn-radio следует использовать с выражением AngularJS, а не интерполированное значение
  • ng-repeat создает новую область, поэтому вам нужно принять это во внимание, если вы хотите привязать к значению, определенному в родительской области