web-dev-qa-db-fra.com

Bouton radio coché par défaut lors de l'utilisation de ng-repeat

Je voulais faire cocher un bouton radio dans une liste de boutons radio que je présente à l'écran en utilisant ng-repeat, mais mon code ne fonctionne pas. Voici ce que je fais:

<div class="clubRole" data-ng-if="club.checked">
    <div data-ng-repeat="role in securityGroups.slice(0,1)">
        <input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode" checked="checked"> {{role.description}}
    </div>
    <div data-ng-repeat="role in securityGroups.slice(1,securityGroups.length+1)">
        <input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode"> {{role.description}}
    </div>      
</div>

L'intention du code est de faire cocher le premier bouton radio et de décocher les autres. Ce code a un problème: ça ne marche pas. Mais au moins, cela donne une idée de ce que j'essaye de faire: je veux que l'un des boutons radio soit coché par défaut, peu importe de quel nom.

angularjshtml5radio-button
10
Jadiel de Armas

Le bouton radio sera vérifié si la valeur de l'attribut d'entrée est égale à la valeur de modal appliquée sur le bouton radio.

 <div ng-repeat="val in ['a','b','c']">
     <input
            type="radio"
            name="val"
            data-ng-model="role" 
            data-ng-value="val"
            ng-init="$index==0?(role=val):''"
      />
     {{val}}
 </div>

Coché = "coché" ne fonctionnera pas dans un contexte angulaire. Vous pouvez définir la valeur du bouton radio de manière explicite dans le contrôleur ou la gérer dans la vue elle-même comme je l'ai fait dans l'exemple ci-dessus.Mais le modal doit être égal à l'attribut value de l'élément inmput.

Par exemple, si modal est x sur trois boutons radio et que chaque bouton radio a une valeur différente comme a, b et c. alors x doit être égal à n’importe quelle valeur à vérifier.

Plunker

15
squiroid

Vous n'avez pas besoin de vous soucier de coché.

HTML:

<div ng-app="app">
<div ng-controller="mainController">
    <label ng-repeat="option in options">
        <input type="radio" ng-model="$parent.selected" ng-value="option"/>{{option}}
    </label>
</div>
</div>

JavaScript:

var appModule = angular.module('app', []);

appModule.controller('mainController', function($scope) {

$scope.selected = 'red';
$scope.options = ['red', 'blue', 'yellow', 'green'];

});

Travailler le violon ici: https://jsfiddle.net/qnw8ogrk/1/

7
bm1729

Vous n'avez pas besoin de checked="checked", je pense qu'angular s'en occupera tout seul si vous définissez le modèle sur l'une des valeurs. Quelque chose comme:

club.role = securityGroups.slice(0,1)[0].securityGroupCode;

En outre, la portée peut vous faire trébucher ici, le modèle devra peut-être être $parent.club.role

1
Victor

si vous utilisez un type primitif dans la liste, la réponse de bm1729 est correcte, mais si vous utilisez des objets dans la liste, regardez cet exemple: https://jsfiddle.net/9chd58mk/2/

la première partie est incorrecte, car l'objet sélectionné est identique à un élément de la liste, mais il n'est pas identique par référence. l'opérateur == est faux dans ce cas

$scope.selected = {c:'red'};
$scope.options = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];

mais les deuxième et troisième exemples utilisent la référence d’élément de la liste et le bouton radio est coché. l'opérateur == est vrai dans ce cas

$scope.options3 = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];
$scope.selected3 = $scope.options3[0];
1
sarkiroka
  <md-radio-group ng-model="data.group3">
                                                    <md-radio-button value="{{o._id}}" class="md-primary" ng-repeat="o in lstDataRecord" ng-click="updTemplateId(o._id)">
                                                        <div flex-gt-sm="50" style="height: 150px; width: 250px;">
                                                            <img src="{{PageInfo_PATH}}{{o.imgUrl}}" />
                                                            {{o.displayName}}
                                                        </div>
                                                    </md-radio-button>
                                                    <md-radio-button value="active" class="md-primary" [checked]='true'> </md-radio-button>
                                                </md-radio-group>
0
Mayur Vaghasiya