Простые угловые переключатели не работают ... кажутся сломанными?

Question

Это работает:

<h4>Radio &amp; Uncheckable Radio</h4> 
<pre>{{radioModel || 'null'}}</pre> 
<div class="btn-group"> 
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label> 
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label> 
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label> 
</div> 

Это не работает

{{radioModel || 'null'}} 
<div class="btn-group"> 
    <label class="btn btn-primary" data-ng-repeat="store in global.user.store" ng-model="radioModel" btn-radio="{{store}}" uncheckable>{{store}}</label><br> 
</div> 

При выборе одной кнопки радио, остальные радиокнопки не отмены выбора. Вместо того, чтобы одновременно проверять одну радиокнопку, можно проверить все 3! И {{radioModel}} не будет отображать какое-либо значение. В первом примере {{radioModel}} будет отображать «Left», «Right» или «Middle» в зависимости от значения btn-radio.

Это как data-ng-repeat = "store in global.user.store" нарушает поведение кнопки!

Answer 1

Попробуйте установить переменную область с точкой, например, если он объект.

$scope.radio = {model: null}; //for example 

И использовать всегда radio.model вместо radioModel.

Это связано с тем, что способ наследования области действия каждой ng-модели ng-repeat будет генерировать новую область. С правилом «точка» вы хотите иметь эту проблему.

Дополнительная информация https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

Try удаления {{}} в атрибуте btn-radio:

<label class="btn btn-primary" data-ng-repeat="store in global.user.store" ng-model="radioModel" btn-radio="store" uncheckable>{{store}}</label>