Mi formulario está estructurado de la siguiente manera:
<form class="content"> <div class="inner-content" ng-repeat="item in items"> <span class="inner-content-name">{{item.name}}</span> <input class="inner-content-toggle" ng-class="{{item.className}}" type="radio" ng-click="toggle(item.id, item.name)" ng-checked={{item.checked}} /> </div> </form>Mi pregunta es más sobre por qué esto no funciona... Cuando hago clic en uno de los botones de radio en la interfaz de usuario renderizada, agrega el punto interno, sin embargo, el punto interno cuando se vuelve a hacer clic no desaparece y permanece permanentemente. Además, si selecciono otro botón de radio mientras se hace clic en uno, ahora se hace clic en ambos y ambos no se desmarcarán. Este comportamiento es muy parecido a una casilla de verificación, pero quiero que solo se haga clic en una. ¿Alguna sugerencia?
Debe establecer el atributo de nombre con el mismo valor para los elementos de radio si son mutuamente excluyentes.
Por ejemplo prueba esto:
JavaScript:
this.items = [ { name: 'foo', nameAttr: 'radio-option1', className: 'foo-bar', checked: 1 }, { name: 'bar', nameAttr: 'radio-option1', className: 'foo-bar', checked: 0 } ];html:
<form class="content"> <div class="inner-content" ng-repeat="item in $ctrl.items"> <span class="inner-content-name">{{item.name}}</span> <input class="inner-content-toggle" name="{{item.nameAttr}}" ng-class="{{item.className}}" type="radio" ng-click="$ctrl.toggle(item)" ng-checked="item.checked" /> </div> </form>Zona de juegos: https://stackblitz.com/edit/angularjs-qhcken?file=home/home.controller.js