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

J'ai eu envie d'avoir un bouton radio coché sur une liste de boutons radio que je présente à l'écran à l'aide ng-repeat, mais mon code ne fonctionne pas. C'est 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 de ce code est d'obtenir le premier bouton radio coché, et les autres décochée. Ce code a un problème: il ne fonctionne pas. Mais au moins, elle donne l'idée de ce que je suis en train de faire: je veux un des boutons d'option cochée par défaut, n'importe lequel.

vous devez utiliser data-ng-model="$parent.club.role" parce que vous avez utilisé ng-if
Je crois que c'est ng-repeat qui crée son propre champ d'application, pas de ng-si
ng-if crée également un nouveau champ d'application, vous avez besoin de regarder docs.angularjs.org/api/ng/directive/ngIf

OriginalL'auteur Jadiel de Armas | 2015-04-09

15

Bouton Radio sera de vérifier si la valeur de l'attribut d'entrée est égale à la valeur du modal appliqué 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>
```
Checked="checked" ne fonctionne pas dans angulaire contexte. Vous pouvez définir la valeur du bouton radio explicitement dans le contrôleur ou vous pouvez le gérer dans la vue elle-même comme je l'ai fait dans l'exemple ci-dessus.Mais le modal doit être assimiler en fonction de la valeur de l'attribut sur la inmput élément.

Par exemple, si modal est x sur trois bouton radio et de chaque bouton radio ont une valeur différente, comme a,b et c. alors x doit être égal à tout de la valeur à vérifier.

Plunker

OriginalL'auteur squiroid

Vous n'avez pas besoin de vous soucier de vérifier.

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'];

});

De travail violon ici: https://jsfiddle.net/qnw8ogrk/1/

agréable et propre +1

OriginalL'auteur bm1729

1

Vous n'avez pas besoin checked="checked", je pense angulaire prendra soin de lui-même si vous définissez le modèle à l'une des valeurs. Quelque chose comme:
```
club.role = securityGroups.slice(0,1)[0].securityGroupCode;
```
Aussi, la portée peut voyage jusqu'ici, le modèle peut être $parent.club.role

OriginalL'auteur Victor
1

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

la première partie est mauvais, parce que l'objet sélectionné est ressembler même avec un élément de la liste, mais il n'a pas la même référence. l'opérateur == qui est faux dans ce cas
```
$scope.selected = {c:'red'};
$scope.options = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];
```
mais la deuxième et la troisième sont des exemples d'utilisation de l'élément de la liste de référence, et le bouton radio coché. l'opérateur == est vrai dans ce cas
```
$scope.options3 = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];
$scope.selected3 = $scope.options3[0];
```
OriginalL'auteur 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>

Votre réponse est à seulement code. Merci de l'améliorer avec quelques explications.

OriginalL'auteur Mayur Vaghasiya

Vous devez vous connecter pour publier un commentaire.